Buttons

Clickable elements that perform one action.

The buttons show the actions of each page. They have quick identification of functionality (preferably through a verb) with clear definitions of hierarchy, so the main action is related to the primary style and the others to the secondary ones.

Anatomy (Primary and ghost)

The button text pattern follows that described in btn-default in typography tokens.

Primary button

Primary buttons are related to only the main action of a page.

Status in gif

Ghost button

Status in gif

Icon button

Icon buttons most of the time appear with a label to easy action association by users.

Status do botão em gif

Text link

Please, remember that the text links should be written with an action verb, this is more accessible information for most users.

Attention

Do not create new button styles! It can be really funny however it will smash our design system.