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.