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 (e.g., through keyboard navigation).
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.