Pharos
Navegar componentes
← Componentes

Button

ButtonExemplo
Button dispara uma ação quando clicado. Use para envio de formulários, confirmações, navegação ou qualquer interação que precise de uma call to action clara.
Importação
import {Button} from '@pharos-ds/core/Button';

Exemplos

Área interativa

variant
size
isLoading
isDisabled
Código
import {Button} from '@pharos-ds/core/Button';

<Button
  label="Botão"
  variant="secondary"
  size="md"
  isLoading={false}
  isDisabled={false}
 />

Boas práticas

  • Faça: Reserve primary para a ação mais importante da view. Use secondary ou ghost para todo o resto, conforme a ênfase.
  • Faça: Escreva rótulos que descrevam a ação ("Salvar alterações", "Excluir conta", "Enviar convite"), não rótulos vagos como "OK" ou "Clique aqui".
  • Faça: Mostre um estado de loading para ações que levam tempo, como salvar ou enviar, para que o usuário saiba que está em andamento.
  • Faça: Sempre forneça um rótulo para botões somente com ícone, para que leitores de tela anunciem o que o botão faz. Adicione um tooltip para usuários videntes.
  • Faça: Para um botão dedicado somente com ícone, use IconButton de '@pharos-ds/core/IconButton'. É um componente separado, não exportado de '@pharos-ds/core/Button'.
  • Evite: Coloque mais de um botão primary na mesma view; isso dilui a hierarquia visual.
  • Evite: Use a variant destructive sem uma etapa de confirmação para ações irreversíveis como excluir dados.
  • Evite: Use um botão para navegação. Se ele apenas leva o usuário a outra página, use um link. Botões são para ações como salvar, excluir ou enviar.

Props

PropTipoPadrãoDescrição
label *string—Rótulo acessível. Renderizado como texto visível por padrão; usado como aria-label quando isIconOnly é true.
variant'primary' | 'secondary' | 'ghost' | 'destructive''secondary'Variant de estilo visual.
size'sm' | 'md' | 'lg''md'Variant de tamanho.
elevation'none' | 'low' | 'med' | 'high''none'Profundidade de sombra em repouso para botões flutuantes (ex.: um FAB). `none` é o botão plano padrão; `low`/`med`/`high` mapeiam para a escala de tokens de sombra. Ignorado dentro de um ButtonGroup, onde a elevation é controlada pelo grupo.
type'button' | 'submit' | 'reset''button'Atributo HTML type do botão.
namestring—Atributo HTML name para envio de formulário.
valuestring | number | readonly string[]—Atributo HTML value para envio de formulário.
formstring—Associa o botão a um elemento form por ID.
isLoadingbooleanfalseMostra um spinner de loading e desabilita a interação. Anuncia "Loading" via live region.
isInterruptiblebooleanfalseMantém o botão clicável enquanto um clickAction está pendente: o spinner e aria-busy ainda aparecem, mas o botão não é desabilitado e a ação não é deduplicada, então um novo clique chega e interrompe a ação em andamento com uma nova.
isDisabledbooleanfalseDesabilita o botão. Quando há tooltip, usa aria-disabled em vez de disabled nativo, para que o botão permaneça focável.
iconReactNode—Elemento de ícone renderizado antes do texto do rótulo.
isIconOnlybooleanfalseQuando true, renderiza como botão quadrado somente com ícone, com label como aria-label. Requer icon. Dica: para um componente dedicado somente com ícone, use IconButton de '@pharos-ds/core/IconButton'.
widthSizeValue—Largura do botão. Números são tratados como pixels; strings são usadas como estão (ex.: '100%' para botão full-width). Por padrão, o botão se dimensiona ao conteúdo.
childrenReactNode—Sobrescrita opcional do texto visível. Quando fornecido, é exibido no lugar de label, mas label ainda é obrigatório (fornece o nome acessível). Na maioria dos casos, use apenas label: <Button label="Save" />.
endContentReactElement<IconProps> | ReactElement<BadgeProps>—Ícone ou badge trailing renderizado após o rótulo. Ignorado quando isIconOnly é true. A cor é herdada da variant do botão.
tooltipstring—Texto do tooltip exibido ao passar o mouse.
onClick(e: MouseEvent) => void—Handler padrão de clique (repassado de ButtonHTMLAttributes).
clickAction(e: MouseEvent) => void | Promise<void>—Handler assíncrono de clique. Mostra estado de loading enquanto a promise retornada está pendente.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Button
Button · Pharos