anticaos
Visão geralFundamentosComponentesPara agentes

Button

Dispara uma ação: enviar, salvar, abrir, confirmar.

Playground

Variante

Tamanho

<Button>
  Salvar
</Button>

Quando usar

  • ✓Ação que muda algo ou abre algo na mesma tela
  • ✓Ação principal de um formulário ou card (uma por área, variant default)

Evite quando

  • Navegar para outra página→ um link (<a>), ou Button com render={<a href=… />} se precisar do visual de botão
  • Ligar/desligar um estado que fica visível→ Toggle ou Switch
  • Várias ações de mesmo peso lado a lado→ no máximo uma default; as outras outline ou ghost

Variantes e props

variantpadrão: default
defaultoutlinesecondaryghostdestructivelinkfloatglass

default = ação principal (quase-preto). destructive = apagar/sair. float e glass só sobre superfícies de vidro ou imagem.

sizepadrão: default
defaultxssmlgiconicon-xsicon-smicon-lgicon-xl

default 32px. icon-* para botões só com ícone (exigem aria-label). icon-xl (44px) para botões de vidro/toque.

render

Base UI: troca o elemento renderizado mantendo o estilo (ex.: render={<a href='/x' />}).

Estados

hoverfocus-visible (anel)active (desce 1px)disabledaria-invalidaria-expanded (quando abre menu/popover)

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel
button
Teclado
Enter e Espaço acionam
  • Botão só com ícone precisa de aria-label
  • Não use disabled para esconder o motivo: explique por que não dá para agir

Código

import
import { Button } from "@/components/ui/button";

Fonte: src/components/ui/button.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: Toggle, DropdownMenu, Dialog