Cherry offers three variations of buttons, each defining the color of the button. These variations can be customized further to create different visual effects, like outlined. Buttons come in two sizes: default and big.
When customizing your designs, consider all the different states that buttons can have:
:hover - When the user hovers the cursor over the button.:active - When the button is clicked or pressed.:focus - When the button gains focus.Ensure that your designs account for all these states to provide a consistent and user-friendly experience.
| Variant | Size | Outline |
|---|---|---|
| Primary | Default | No |
| Primary | Big | No |
| Primary | Default | Yes |
| Primary | Big | Yes |
| Variant | Size | Outline |
|---|---|---|
| Secondary | Default | No |
| Secondary | Big | No |
| Secondary | Default | Yes |
| Secondary | Big | Yes |
| Variant | Size | Outline |
|---|---|---|
| Tertiary | Default | No |
| Tertiary | Big | No |
| Tertiary | Default | Yes |
| Tertiary | Big | Yes |
| Variant | Size |
|---|---|
| Disabled | Default (Outline) |
| Disabled | Big |
Buttons can be found in the Figma Template in the Buttons page.