Buttons - Design

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. Additionally, buttons in Cherry come in two sizes: the default size and a larger “big” size.

When customizing your designs, it’s crucial to consider all the different states that buttons can have:

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

Ensure that your designs account for all these states to provide a consistent and user-friendly experience.

Buttons can be found in the Figma Template in the 👆 Buttons page.