Component (RN)
React Native Component Status
Status
Component checklist
Published
Figma (RN)
Figma Component Status
Published
Code (Web)
HTML/CSS Code
Published
Figma (Web)
Figma Component Status
Published
Key points
- Three button variants are available to indicate different levels of intent
- Icons can be placed before or after the button label with specific layout rules
- When using icons, always include a label if space can accommodate the text
- Button groups are well-documented, and guidelines should be followed
- For combinations of buttons, refer to the button groups examples and guidelines
Use buttons to trigger actions on the same page. Buttons should have concise labels that clearly indicate the action to the user.
Button variants on both surfaces
Buttons vs Links
- Buttons are used to trigger actions on the same page. The correct styles and icons should be considered to indicate intent.
- Links are used to navigate users to a new page or URL.
Buttons and links use different HTML markup and attributes which are handled specifically by browsers and screen readers. The usage of buttons should be consistent across a journey.
For more guidance on correct usage and markup, see buttoncheatsheet.com
Disabled Buttons
The disabled state of buttons should be used only as a last resort. Aim to reduce user cognitive load by displaying buttons only when an action is available.
There are several common issues with disabled buttons, including:
- They fail to give feedback on what is causing an error
- The UI feels broken if the user believes their data is correct
- Challenging to see or detect a change in state
- They are not focusable by assistive technology
If a third-party application requires disabled states, or if research shows it is necessary to use a disabled button, the disabled state is available.
File Links