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.

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

Secondary

Tertiary

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.