AppButton

Átomos

Botão de ação com variações de aparência, tom e tamanho, ícones, estado de carregamento e modo só-ícone.

Quando usar: ações primárias e secundárias (enviar formulário, "Participar", confirmar, cancelar), ações destrutivas (tone="danger") e ações só com ícone.

Quando não usar: navegação entre páginas (use um link <a> estilizado); rótulos informativos ou removíveis (use AppTag); controle de paginação (use AppPagination).

Acessibilidade: botão só com ícone (icon) exige aria-label ou aria-labelledby.

Importar

import { AppButton } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppButton.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppButton.css';

Exemplos

Default

const Default = () => <AppButton>Participar</AppButton>;

Secondary

const Secondary = () => <AppButton tone="secondary">Ver regulamento</AppButton>;

Soft

const Soft = () => <AppButton appearance="soft">Saiba mais</AppButton>;

Outline

const Outline = () => <AppButton appearance="outline">Cancelar</AppButton>;

Ghost

const Ghost = () => <AppButton appearance="ghost">Voltar</AppButton>;

Link

const Link = () => <AppButton appearance="link">Termos de uso</AppButton>;

Destructive

const Destructive = () => <AppButton tone="danger">Excluir cadastro</AppButton>;

Sizes

const Sizes = (args) => (
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
    {(['sm', 'md', 'lg', 'xl', '2xl'] as const).map((size) => (
      <AppButton key={size} {...args} size={size}>{`Tamanho ${size}`}</AppButton>
    ))}
  </div>
);

Full Width

const FullWidth = () => <AppButton size="full">Enviar nota fiscal</AppButton>;

With Leading Icon

const WithLeadingIcon = () => <AppButton leadingIcon={<IconCheck />}>Confirmar participação</AppButton>;

With Trailing Icon

const WithTrailingIcon = () => <AppButton trailingIcon={<IconArrowForward />}>Continuar</AppButton>;

With Dot

const WithDot = () => <AppButton dot appearance="outline">Em andamento</AppButton>;

Icon Only

const IconOnly = () => <AppButton icon={<IconAdd />} aria-label="Adicionar nota fiscal">{undefined}</AppButton>;

Loading

const Loading = () => <AppButton isLoading>Enviando...</AppButton>;

Disabled

const Disabled = () => <AppButton disabled>Participar</AppButton>;

Tone Appearance Matrix

const ToneAppearanceMatrix = () => (
  <div style={{ display: 'grid', gridTemplateColumns: `repeat(${appearances.length}, max-content)`, gap: 12, background: 'var(--color-surface)', padding: 16 }}>
    {tones.flatMap((tone) =>
      appearances.map((appearance) => (
        <AppButton key={`${tone}-${appearance}`} tone={tone} appearance={appearance} size="md" leadingIcon={tone === 'danger' ? <IconDelete /> : undefined}>
          {`${tone} ${appearance}`}
        </AppButton>
      )),
    )}
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
`appearance`	`"link" \| "solid" \| "soft" \| "outline" \| "ghost"`	`—`	Estilo visual: `solid` (destaque), `soft` (fundo suave), `outline` (borda), `ghost` (sem fundo) ou `link` (texto sublinhado). Padrão: `solid`.
`children`	`ReactNode`	`—`	Texto do botão; vira o nome acessível. Não use junto com `icon`.
`dot`	`boolean`	`—`	Ponto de status antes do texto, decorativo. Não use junto com `icon`.
`icon`	`ReactNode`	`—`	Botão quadrado só com ícone. Exige `aria-label` ou `aria-labelledby`; não aceita `children`, `leadingIcon`, `trailingIcon`, `dot` nem `size="full"`.
`isLoading`	`boolean`	`false`	Mostra um spinner no lugar do ícone/ponto à esquerda, desabilita o botão e marca `aria-busy`. Padrão: `false`.
`leadingIcon`	`ReactNode`	`—`	Ícone antes do texto, decorativo (`aria-hidden`). Não use junto com `icon`.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"`	`—`	Tamanho: `sm` 36px, `md` 40px, `lg` 44px, `xl` 48px, `2xl` 60px ou `full` (largura total, só com texto). Padrão: `lg`.
`tone`	`"success" \| "info" \| "warning" \| "danger" \| "primary" \| "secondary" \| "white"`	`—`	Cor semântica: `primary`, `secondary`, `success`, `info`, `warning`, `danger` ou `white` (neutro: fundo branco, borda e texto cinza). Padrão: `primary`.
`trailingIcon`	`ReactNode`	`—`	Ícone depois do texto, decorativo (`aria-hidden`). Não use junto com `icon`.