Utilização

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

Exemplos

Variantes

Default

Utiliza o estilo padrão do botão. com fundo e texto em destaque utilizando o token primary do design system. Bom para ações principais.

Outline

Utiliza o estilo de botão com contorno. Bom para ações secundárias ou complementares.

Secondary

Utiliza o estilo de botão secundário, com fundo cinza e texto em destaque. Bom para ações que não precisam de destaque visual.

Ghost

Utiliza o estilo de botão transparente, com fundo invisível e texto em destaque. Bom para ações que não precisam de destaque visual.

Destructive

Utiliza o estilo de botão destrutivo, com fundo vermelho e texto branco. Bom para ações que podem causar perda de dados ou ações irreversíveis.

Link

Utiliza o estilo de botão com aparência de link. Bom para ações que não precisam de destaque visual, como links de navegação.

Unstyled

Utiliza o estilo de botão sem formatação. Permite total customização de estilo, mas não possui estilos padrão aplicados.

Tamanhos

Com ícone

Carregando

Para desabilitar a interação do botão e aplicar uma animação de carregamento, utilize a prop loading.

buttonVariants

O componente Button exporta uma função chamada buttonVariants que pode ser utilizada para estilizar outros componentes, como Link, a, etc. Essa função retorna um objeto com as classes CSS correspondentes às variantes e tamanhos do botão.

import { buttonVariants } from "@convertcompany/ui";

return (
  <a className={buttonVariants({ variant: "outline", size: "sm" })} href="#">
    Link estilizado como botão
  </a>
);

Props