# Buttons

> Cherry button design specifications with three variations, sizes, outline variants, icon buttons, and all interactive states.

Source: https://cherry.al/buttons

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Buttons

Cherry offers three color variations of buttons: Primary, Secondary, and Tertiary. Each variation comes in three sizes (Small, Default, and Big) with optional outline styling.

## States

When customizing your designs, consider all the different states that buttons can have:

1. **Normal** - The default appearance of the button.
2. **Hover** `:hover` - When the user hovers the cursor over the button.
3. **Active** `:active` - When the button is clicked or pressed.
4. **Focus** `:focus` - When the button gains focus.
5. **Disabled** - When the button cannot be interacted with.

<Callout type="warning">
  Ensure that your designs account for all these states to provide a consistent
  and user-friendly experience.
</Callout>

## Variations

Beyond the color variations below, regular buttons also support a full-width option that stretches the button to the full width of its container, an error variant for destructive actions (available in both filled and outline styles), and inline icons placed on either side of the label.

### Primary

<iframe className="light-only" src="https://demo.cherry.al/preview/button?theme=light" title="Primary button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/button?theme=dark" title="Primary button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

<iframe className="light-only" src="https://demo.cherry.al/preview/button-outline?theme=light" title="Primary outline button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/button-outline?theme=dark" title="Primary outline button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Filled | Outline | Disabled |
| ------- | ------ | ------- | -------- |
| Small   | Yes    | Yes     | Yes      |
| Default | Yes    | Yes     | Yes      |
| Big     | Yes    | Yes     | Yes      |

### Secondary

<iframe className="light-only" src="https://demo.cherry.al/preview/button-secondary?theme=light" title="Secondary button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/button-secondary?theme=dark" title="Secondary button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Filled | Outline | Disabled |
| ------- | ------ | ------- | -------- |
| Small   | Yes    | Yes     | Yes      |
| Default | Yes    | Yes     | Yes      |
| Big     | Yes    | Yes     | Yes      |

### Tertiary

<iframe className="light-only" src="https://demo.cherry.al/preview/button-tertiary?theme=light" title="Tertiary button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/button-tertiary?theme=dark" title="Tertiary button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Filled | Outline | Disabled |
| ------- | ------ | ------- | -------- |
| Small   | Yes    | Yes     | Yes      |
| Default | Yes    | Yes     | Yes      |
| Big     | Yes    | Yes     | Yes      |

## Icon Buttons

Icon buttons are circular, icon-only buttons for compact actions like edit, delete, or settings. They come in three sizes (24px, 28px, and 32px) and support all interactive states, an error variant for destructive actions, and an active "on" state (primary border with a translucent primary tint) for toggle-like actions such as an open dropzone or an active preview.

Because icon buttons have no visible text, every icon button requires an `aria-label` describing its action. The active "on" state is exposed to assistive technology as `aria-pressed`.

<iframe className="light-only" src="https://demo.cherry.al/preview/icon-button?theme=light" title="Icon button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/icon-button?theme=dark" title="Icon button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Error | Active | Disabled |
| ------- | ------- | ----- | ------ | -------- |
| Small   | Yes     | Yes   | Yes    | Yes      |
| Default | Yes     | Yes   | Yes    | Yes      |
| Big     | Yes     | Yes   | Yes    | Yes      |

<Callout type="info">
  Ready to build? See the [Button](/code/button) and
  [IconButton](/code/icon-button) component docs for props and usage examples.
</Callout>

<Callout type="note">
  Buttons can be found in the Figma Template in the Components page, alongside
  the IconButton component set.
</Callout>

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  View in Figma
</Button>