Buttons
Buttons are used to perform an action. Their labels tell the user what will happen when they interact with them.
- Overview
- Specs
- Guidelines
Component
It’s the area where the user can trigger an action and it can contain icons and labels.
Can be represented with the colors theme, grey and error. Alongside it can be combined with the variations primary, secondary, tertiary and text button.
- A: Primary variation
- B: Secondary variation
- C: Tertiary variation
- D: Text Button variation
- 1: Left icon
- 2: Label
- 3: Right icon
Used for:
Form submission
Used to submit data entered into forms, such as Submit or Send.
Progressing or regressing
Enables users to navigate within a Modal, including Next, Previous, Previous Step and Next Step.
Expansion buttons
Reveals additional content or options when clicked, like Show More or Expand.
File upload buttons
Initiates the process of uploading files or media, labeled as Upload File or Choose File.
Alternative actions
Offers an alternative action or serves as a backup option to the primary action, often labeled as Cancel, Close or Back.
Don’t use for:
Navigation within the page
Do not use buttons as navigational elements. Instead, use Links.
Ambiguous actions
If the action triggered by the button is ambiguous or may have unintended consequences, consider providing additional context or confirmation to prevent user errors.
Redundant content
Avoid introducing buttons that duplicate functionality already available through other interface elements.
Temporary content
Avoid using buttons for content that is temporary or transitional in nature. For example, elements that appear briefly for notifications or alerts may not require button interaction unless necessary.
Glossary
If you’d like, you can consult the buttons glossary, which contains a set of buttons, their description and translations into Portuguese and Spanish.
Demo
Access the Figma file and inspect element using Dev Mode.
Last Update
- Added counter guidelines;
- Updated hierarchy guidelines.
Related
