Button

Ação e status

Ação principal, secundária ou destrutiva. Tom e variante são separados: o tom diz o que a ação é, a variante diz quanto ela pesa na tela. "Cancelar" e "Fechar" são neutros com contorno; vermelho só para excluir, remover, descartar e arquivar.

Substitui no Brain:ds Buttonpartners buttonLinkButton / AnchorButton

Tons e variantes

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

export default function Example() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button>Salvar</Button>
      <Button variant="soft">Exportar</Button>
      <Button variant="outline">Exportar</Button>
      <Button tone="neutral" variant="outline">Cancelar</Button>
      <Button tone="neutral" variant="soft">Voltar</Button>
      <Button tone="neutral" variant="ghost">Ver todos</Button>
      <Button tone="danger">Excluir</Button>
      <Button tone="danger" variant="outline">Excluir</Button>
      <Button tone="highlight" variant="soft">Filtros</Button>
    </div>
  );
}

Tamanhos e ícone

import { Button } from "@paytime/ui";
import { Plus } from "lucide-react";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm" icon={<Plus />}>Adicionar</Button>
      <Button icon={<Plus />}>Novo processo</Button>
      <Button size="lg">Continuar</Button>
    </div>
  );
}

Desabilitado e carregando

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

export default function Example() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button disabled>Salvar</Button>
      <Button loading>Salvando</Button>
      <Button tone="neutral" variant="outline" loading>Carregando</Button>
    </div>
  );
}

Como link

Abrir relatório

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

export default function Example() {
  return (
    <Button asChild tone="neutral" variant="outline">
      <a href="#">Abrir relatório</a>
    </Button>
  );
}