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;
Display multiple actions
Do not use buttons to display multiple actions. Consider using Split Buttons instead;
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
- Updated label typography;
- Updated state color variables;
- Reduced color variables;
- Old tertiary is now text-button;
- Filled vs Outline removed;
- Created new tertiary variation;
Related
