AI Assistant

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.

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

Variations

Primary

SizeFilledOutline
SmallYesYes
DefaultYesYes
BigYesYes

Secondary

SizeFilledOutline
SmallYesYes
DefaultYesYes
BigYesYes

Tertiary

SizeFilledOutline
SmallYesYes
DefaultYesYes
BigYesYes

Disabled

SizeFilledOutline
SmallYesYes
DefaultYesYes
BigYesYes

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

Shadows PreviousInputsNext
GitHubDiscord