Skip to main content

Button

The button is an interface element that makes it possible to perform an action. It must clearly and objectively represent the effect of the action when clicked. Do not use buttons to navigate between pages, use links.

Kinds​

Primary button​

Use to indicate the main action available on the page. In an interface there must be only one primary button.

Secondary button​

Use to indicate general actions. Its importance level is medium, so to avoid hierarchy problems, use secondary actions always related to some primary action.

Tertiary button​

Use to indicate general actions that are unimportant in the interface hierarchy and are not primary or secondary. For example: go back, close overlays, among others.

Danger button​

Use when the main action leads to loss of information. It must always be accompanied by the Cancel button, allowing the user to withdraw from the action.

Only icon​

Use easily recognizable icons. Generic icons can be confusing. For more details visit our examples tab.

ToggleButton​

Compact grouping can be used when the button is not an action but a selectable option. For more details visit our examples tab.

Botão de IA​

Use a prop ia para identificar ações diretamente relacionadas a recursos de Inteligência Artificial. O valor padrão é false. Quando omitida, o botão mantém a aparência definida por kind.

Com ia={true}:

  • kind primário (padrão) aplica o estilo preenchido de IA
  • kind secundário aplica o estilo outlined de IA

Reserve este estilo apenas para ações de IA. Não o utilize para ações gerais nem como substituto dos kinds existentes. O efeito visual depende dos tokens de IA do tema lina / modo light.

Para exemplos interativos de carregamento e somente ícone, acesse a aba de exemplos.

Sizes​

Small​

It should be used only in case of exception, when it is not possible to use the standard size.

Medium (default)​

Main button size. It should be used in most cases.

Button grouping​

Grouping according to similarity and context of their effects.

Good habits​

Only one primary button per screen​

Different buttons side by side​

Label and responsiveness​

Buttons always adjust to the size of the label. Do not modify your size.

It is through a button that the user talks to the experience, so avoid surprises for them.

Tell exactly what will happen when the button is clicked. Action buttons should have two words for clarity.

tip
  • It is recommended to use labels with a maximum of 2 or 3 words.
  • Buttons should never break into 2 lines or cut words in half.
  • The label must reflect exactly the action that the button will do. Follow our text recommendations.

For single action: use verb in infinitive + target or action item. Example: Save Email.

For double action: use 2 verbs in the infinitive. Example: Save and Exit / Save and Forward.

For interactions related to undo: only use the verb in the infinitive. Example: Cancel / Delete.

Feedback​

To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.