Button

Overview

View on FigmaView on GitHub

Purpose

Buttons (also called CTAs – Call To Action) help users initiate actions, from choosing a product, to viewing a deal, to visiting another page.

Anatomy

The Button component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3

  1. Container

    A container is a shape used to represent an enclosed area.

  2. Text Label

    Text labels describe the action that will occur if a user taps a Button.

  3. Icon (Optional)

    An optional icon used to give additional context to the Button’s action.

Variants & States

  • Variants: Primary, Secondary, Tertiary
  • States: Default, Hover, Focus, Disabled
  • Appearance: Default, Light
PrimarySecondaryTertiaryDisabled