Botão

Botões do sistema de design BoardUI: variantes primary, secondary, ghost e danger em três tamanhos, ícones antes ou depois do texto, modo somente ícone e estados de hover, pressionado e desabilitado.

Instalação

Você pode adicionar este componente de botão usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add button

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Variantes

Quatro variantes com a variant prop. As variantes primary e danger usam gradientes verticais, secondary tem uma superfície com borda e ghost usa uma superfície azul sutil.

<Button variant="primary">Primary</Button>     {/* blue gradient (default) */}<Button variant="secondary">Secondary</Button> {/* white surface + hairline border */}<Button variant="ghost">Ghost</Button>         {/* blue-100 semantic surface */}<Button variant="danger">Danger</Button>       {/* red gradient */}

Tamanhos

Três tamanhos - médio (36px, o padrão), pequeno (32px) e xs (24px). Os botões só de ícones tornam-se quadrados em todos os tamanhos.

<Button size="medium">Medium</Button> {/* 36px (default) */}<Button size="small">Small</Button>   {/* 32px */}<Button size="xs">Xs</Button>         {/* 24px */}

Ícones

Passe qualquer referência de componente Remix Icon para leadingIcon / trailingIcon. Combinar iconOnly com uma aria-label para botões de ícones quadrados.

import { RiAddLine, RiArrowRightLine } from "@remixicon/react";
{/* Pass component references, not rendered elements */}<Button leadingIcon={RiAddLine}>New project</Button><Button trailingIcon={RiArrowRightLine}>Continue</Button>
{/* Icon-only requires an aria-label */}<Button iconOnly leadingIcon={RiAddLine} aria-label="Add" />

Desabilitado

O atributo nativo disabled aplica o estilo desabilitado a todas as variantes.