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:
- Normal - The default appearance of the button.
- Hover
:hover- When the user hovers the cursor over the button. - Active
:active- When the button is clicked or pressed. - Focus
:focus- When the button gains focus. - Disabled - When the button cannot be interacted with.
Ensure that your designs account for all these states to provide a consistent and user-friendly experience.
Variations
Primary
| Size | Filled | Outline |
|---|---|---|
| Small | Yes | Yes |
| Default | Yes | Yes |
| Big | Yes | Yes |
Secondary
| Size | Filled | Outline |
|---|---|---|
| Small | Yes | Yes |
| Default | Yes | Yes |
| Big | Yes | Yes |
Tertiary
| Size | Filled | Outline |
|---|---|---|
| Small | Yes | Yes |
| Default | Yes | Yes |
| Big | Yes | Yes |
Disabled
| Size | Filled | Outline |
|---|---|---|
| Small | Yes | Yes |
| Default | Yes | Yes |
| Big | Yes | Yes |
Buttons can be found in the Figma Template in the Buttons page.