AppBadge

Átomos

Selo compacto para comunicar status, contagens ou destaques breves.

Quando usar: success para status ativo ou aprovado; warning para avisos; danger para erro ou queda; info para informação; neutral para contagens como "+N" e rótulos neutros; primary para destaque de campanha.

Quando não usar: o conteúdo precisa de ação, descrição longa ou prioridade suficiente para merecer um alerta.

Importar

import { AppBadge } 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/AppBadge.css';

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

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

Exemplos

Default

const Default = () => <AppBadge>Novo</AppBadge>;

Tons

const Tons = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
    <AppBadge tone="neutral">Neutro</AppBadge>
    <AppBadge tone="primary">Campanha</AppBadge>
    <AppBadge tone="success">Aprovado</AppBadge>
    <AppBadge tone="info">Informação</AppBadge>
    <AppBadge tone="warning">Atenção</AppBadge>
    <AppBadge tone="danger">Erro</AppBadge>
  </div>
);

Com Icone

const ComIcone = () => (
  <div style={{ display: 'flex', gap: 8 }}>
    <AppBadge tone="success" icon={<IconArrowUpward />}>20%</AppBadge>
    <AppBadge tone="danger" icon={<IconArrowDownward />}>20%</AppBadge>
  </div>
);

Grupo

const Grupo = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
    <AppBadge tone="primary">Label</AppBadge>
    <AppBadge tone="info">Label</AppBadge>
    <AppBadge tone="success">Label</AppBadge>
    <AppBadge tone="neutral">+4</AppBadge>
  </div>
);

Status

const Status = () => <AppBadge tone="success">Active</AppBadge>;

Props

Prop	Tipo	Padrão	Descrição
`children`*	`ReactNode`	`—`	Conteúdo curto que identifica o status, a contagem ou o destaque.
`icon`	`ReactNode`	`—`	Ícone decorativo exibido antes do conteúdo.
`tone`	`"success" \| "info" \| "warning" \| "danger" \| "neutral" \| "primary"`	`neutral`	Significado visual do selo. Padrão: `neutral`.