@dexcode/ui

Button

Botão padrão dos sistemas DexCode, com variantes, tamanhos e estado de carregamento. Aceita todas as props de um <button> nativo.

Importação

tsx

import { Button } from "@dexcode/ui";

Playground

Mude as opções e veja o botão e o código atualizarem na hora.

variantsizechildrenloadingdisabledfullWidth

Cliques: 0

tsx

<Button>Salvar</Button>

Exemplos

Variantes

Use primary para a ação principal da tela e danger para ações destrutivas.

tsx

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Tamanhos

tsx

<Button size="sm">Pequeno</Button>
<Button size="md">Médio</Button>
<Button size="lg">Grande</Button>

Carregando

Mostra um spinner e bloqueia novos cliques enquanto loading for true.

tsx

<Button loading>Salvando</Button>
<Button variant="outline" loading>Enviando</Button>

Desabilitado

tsx

<Button disabled>Primary</Button>
<Button variant="outline" disabled>Outline</Button>

Largura total

tsx

<Button fullWidth>Entrar</Button>

Em formulários

O tipo padrão é "button". Para enviar um formulário, passe type="submit".

tsx

<form action={salvar}>
  <Button type="submit">Enviar</Button>
</form>

Props

Prop	Tipo	Padrão	Descrição
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	"primary"	Estilo visual do botão.
size	"sm" \| "md" \| "lg"	"md"	Tamanho do botão.
loading	boolean	false	Mostra um spinner e desabilita o botão.
fullWidth	boolean	false	Ocupa toda a largura do container.
type	"button" \| "submit" \| "reset"	"button"	Tipo nativo do botão. O padrão é "button" para não enviar formulários sem querer.
className	string	—	Classes extras do Tailwind, somadas às do componente. Bom para margem e layout; para trocar cores, prefira outra variant.
...props	ComponentProps<"button">	—	Qualquer outra prop de <button>: onClick, disabled, aria-*, ref etc.