Buttons
Buttons trigger events or actions on-demand by user.
Use Case
- Whenever an action is requested from the system to the user.
HTML
Do's & Dont's
Help the user identify the action to be
done
Buttons help users to execute as many actions as needed to complete
a task.
Buttons' text must be as simple as possible, using mainly action verbs or phrases that can help the user identify clearly what event will be triggered. Also try to tailor the text to the context of the task or screen this is related to.
Buttons' text must be as simple as possible, using mainly action verbs or phrases that can help the user identify clearly what event will be triggered. Also try to tailor the text to the context of the task or screen this is related to.
Only one primary button per screen
(CTAs)
Even though a screen/section/slideout can contain as many buttons as
needed, it is important to let the user know that there is a main
action and a set of secondary actions that can be taken.
For this purpose, apply the Primary look and feel to only one button. For the rest of them, use the Outlined appearance. And, if a third level of actions is needed, you can also use Links.
This indication is shared for both main buttons or CTA (call to action) buttons.
For this purpose, apply the Primary look and feel to only one button. For the rest of them, use the Outlined appearance. And, if a third level of actions is needed, you can also use Links.
This indication is shared for both main buttons or CTA (call to action) buttons.
Navigation and information restrictions
Buttons help the users trigger specific actions.
To keep our applications consistent and create a familiar environment for our users, is important to avoid using buttons for navigations purposes or display not needed information on them.
For these cases, please consider other component options listed.
To keep our applications consistent and create a familiar environment for our users, is important to avoid using buttons for navigations purposes or display not needed information on them.
For these cases, please consider other component options listed.
Alternative and Related components
