ÁtomosButton

Button

Dispara uma ação. O átomo mais comum em qualquer superfície de produto. Acerte este e a maior parte do resto vem junto.

Status: stable · @velon-finance/ui

Visão geral

Variantes

Seis variantes cobrem a hierarquia visual das ações em qualquer tela. Use no máximo uma primary por superfície.

Tamanhos

Com ícone

Estados

Props

PropTipoPadraoDescrição
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive''primary'Estilo visual
size'sm' | 'md' | 'lg' | 'icon''md'Escala de tamanho
asChildbooleanfalseRenderiza como o elemento filho em vez de um <button> (Radix Slot)
disabledbooleanfalseDesabilita a interação e reduz a opacidade
…restButtonHTMLAttributes.Todas as props nativas de button (onClick, type, aria-*, etc.)

Acessibilidade

  • Sempre renderize um <button> (padrão), a menos que você realmente precise de um link. Use asChild com <a> para ações de navegação.
  • Para botões somente com ícone, defina o aria-label descrevendo a ação.
  • Botões desabilitados não recebem focus. Se você precisa de um botão com aparência de desabilitado que ainda receba focus (para exibir um tooltip), use aria-disabled em vez da prop disabled.
  • O focus ring atende ao contraste WCAG AA tanto no tema claro quanto no escuro.

Faça / Não faça

Faça

Uma ação primary por superfície, acompanhada de um cancelar mais discreto.

Não faça

Dois primaries disputam a atenção. O usuário precisa ler os dois.

Código

import { Button } from '@velon-finance/ui'
 
<Button variant="primary" onClick={handleSubmit}>
  Confirmar
</Button>
ÍconesInput