Button

Componente de ação principal da interface. Disponível em 4 variantes, 2 tamanhos e com suporte a ícones. Dark mode automático via variáveis semânticas.

components/button.cssAbrir no Figma

Uso

Quando e como utilizar cada variante do botão de acordo com a hierarquia da ação.

Filled — Ação principal da tela.

Não use mais de um botão filled na mesma região, pois pode confundir o usuário sobre suas decisões.

Outlined — Ação secundária.
Ghost — Ação terciária.
FAB — Ação flutuante.

Exemplos

Veja abaixo os exemplos interativos de cada variante do botão, com todos os seus estados.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	`.btn`	Wrapper com padding, border-radius e estados
Label	texto direto	Texto da ação, Inter 14px w500
Ícone	`.btn-icon-content > svg`	Ícone opcional, antes ou depois do label
Spinner	automático via `.is-loading`	Substitui o ícone durante loading

Propriedades

Classes, estados e atributos disponíveis para configurar o botão.

Propriedade	Tipo	Default	Descrição
`.btn-filled`	`classe`	—	Variante preenchida. Ação principal.
`.btn-outlined`	`classe`	—	Variante com borda. Ação secundária.
`.btn-ghost`	`classe`	—	Variante sem fundo/borda. Ação terciária.
`.btn-fab`	`classe`	—	Botão flutuante circular (56px).
`.btn-sm`	`classe`	—	Tamanho pequeno (32px ao invés de 40px).
`.btn-icon`	`classe`	—	Botão somente ícone (40x40 ou 32x32 com .btn-sm).
`.btn-block`	`classe`	—	Largura 100%. Uso em mobile e modais.
`.is-loading`	`estado`	—	Exibe spinner animado. Adicione aria-busy="true".
`.is-disabled`	`estado`	—	Desabilita visualmente via classe (alternativa a disabled).
`disabled`	`atributo`	—	Desabilita o botão nativamente.

Código

Snippets prontos para copiar e usar no seu projeto.

Ação principal + secundária

html

<div style="display: flex; gap: 12px;">
  <button class="btn btn-filled">Confirmar</button>
  <button class="btn btn-outlined">Cancelar</button>
</div>

Botão com ícone e loading

html

<button class="btn btn-filled">
  <span class="btn-icon-content">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
      viewBox="0 0 48 48" fill="none" stroke="currentColor"
      stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
      <path d="M24 44V24"/>
      <path d="M24 24V4"/>
      <path d="M4 24H44"/>
    </svg>
  </span>
  Adicionar
</button>

<button class="btn btn-filled is-loading" aria-busy="true">
  Salvando
</button>

Design

Especificações visuais e tokens utilizados no componente.

Especificações

Propriedade	Large	Small
Altura	40px	32px
Padding	8px 12px	4px 12px
Border-radius	6px	6px
Fonte	Inter 14px w500	Inter 14px w500
Gap (ícone)	8px	8px

Tokens utilizados

Variante	Estado	Background	Borda	Texto
Filled	Default	`--surface-base-brand-container-medium`	—	`--text-base-neutral-white`
Filled	Hover	`--surface-base-brand-container-low`	—	`--text-base-neutral-white`
Filled	Disabled	`--surface-base-neutral-container-emphasis`	—	`--text-base-neutral-subtle`
Outlined	Default	transparent	`--border-base-neutral-default`	`--text-base-neutral-default`
Outlined	Hover	`--surface-base-neutral-container-hover`	`--border-base-neutral-default`	`--text-base-neutral-default`
Ghost	Default	transparent	—	`--text-base-neutral-default`
Ghost	Hover	`--surface-base-neutral-container-hover`	—	`--text-base-neutral-default`

Button ​

Uso ​

Exemplos ​

Anatomia ​

Propriedades ​

Código ​

Ação principal + secundária ​

Botão com ícone e loading ​

Design ​

Especificações ​

Tokens utilizados ​