Buttons (Icon)
An icon button informs users of key actions within an application
Variants
/Icon%20Button%20Variant.png)
| Variant | Usage |
|---|---|
|
Default |
Used when key actions are applicable |
|
Disabled |
Not available for use due to insufficient information or other business rules |
|
New |
Used to inform users of new features |
Anatomy
All icon button types share the same anatomy and are made up of the following:
- Icon: A visual shortcut of the key action
- Container: Used as a container for the icon especially against coloured backgrounds
- Text: Descriptor of the action
- New Label: Used only if it is a new feature
/Icon%20Button%20Anatomy.png)
Size
Icon button container are fixed at 56px all around and corners are rounded to 16 px.
/Icon%20Button%20Size.png)
Text Style
Icon buttons have a label text size of 11px and uses Title case. Use “Note (Emphasis)” text style on Figma.
/Icon%20Button%20Text.png)
Dos and Don'ts
/Icon%20Button%20Do.png)
Use when you want to let users perform key actions within the application. Use as a short cut to different product features. *Note that Icon Buttons are different from Category Buttons.
/Icon%20Button%20Dont.png)
Use when you want to let users perform key actions within the application. Use as a short cut to different product features. *Note that Icon Buttons are different from Category Buttons.