Button

Ações primárias, secundárias e links estilizados.

Ações e indicadores

Carregando demonstração…

Código da demo

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";

export function Demo() {
  const [loading, setLoading] = React.useState(false);

  return (
    <div className="flex flex-col gap-fe-4">
      <div className="flex flex-wrap items-center gap-fe-2">
        <Button>Primária</Button>
        <Button variant="secondary">Secundária</Button>
        <Button variant="outline">Contorno</Button>
        <Button variant="ghost">Fantasma</Button>
        <Button variant="destructive">Excluir</Button>
        <Button variant="link">Link</Button>
      </div>
      <div className="flex flex-wrap items-center gap-fe-2">
        <Button size="xs">Extra pequeno</Button>
        <Button size="sm">Pequeno</Button>
        <Button>Padrão</Button>
        <Button size="lg">Grande</Button>
        <Button disabled>Desabilitado</Button>
        <Button
          loading={loading}
          onClick={() => {
            setLoading(true);
            window.setTimeout(() => setLoading(false), 1600);
          }}
        >
          Salvar alterações
        </Button>
      </div>
    </div>
  );
}

Use

Uma ação primária (default) por tela; as outras em secondary ou ghost.
Verbo no imperativo: “Salvar alterações”, “Novo negócio”.
loading enquanto a ação roda: a largura não muda.

Não use

Não use para navegar: use Link, ou Button asChild com Link.
Não ponha duas primárias lado a lado.
Não use a variante action: está deprecada, use default.
Não use Button para excluir sem confirmar: use AlertDialog.

Acessibilidade: Foco visível; disabled com aria; ícones com texto ou aria-label.
Importar: import { Button } from "@financeequity/ui/button"
Neste repositório:
import { Button } from "@/components/ui/button"
Dependências: radix-ui