Button
Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
Implementation reference
- solid /large
- solid / medium
- solid / small
- Large, medium, and small button can be used as a primary action for Consumer.
- Medium and small button can be used as a primary action on Platform.
- outline /large
- outline / medium
- outline / small
- Large, medium, and small button can be used as a secondary action for Consumer.
- Medium and small button can be used as a secondary action on Platform.
- Outline button large keeps a different border color to small and medium.
- shaded /large
- shaded / medium
- shaded / small
- Shaded buttons are used for tertiary actions such as navigation, or editing items on Platform.
- Group shaded buttons together if using more than one.
- ghost /large
- ghost / medium
- ghost / small
- Used for secondary actions, tertiary actions, or when displaying icons next to text input fields and combo boxes, dropdowns etc.
- Group ghost buttons together if using more than one
- danger /large
- danger / medium
- danger / small
- Use the danger button when an irreversible, permanent action will occur.
- This will usually be used in the final confirmation step of a permanent action flow.
- Does not include a dedicated icon button.