AppTag

Átomos

Etiqueta compacta para rotular, categorizar ou exibir um valor selecionado, opcionalmente removível.

Quando usar: categorias, filtros aplicados, valores escolhidos que o usuário pode remover.

Quando não usar: ações (use AppButton); mensagens de feedback temporárias (use AppToast).

Acessibilidade: o botão "x" é um <button> focável; personalize removeLabel para dizer o que será removido.

Importar

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

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/AppTag.css';

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

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

const Default = () => <AppTag>Marketing</AppTag>;

const Removable = () => <AppTag removeLabel="Remover Marketing">Marketing</AppTag>;

const RemovableByKeyboard = () => <AppTag removeLabel="Remover Marketing">Marketing</AppTag>;

const WithIcon = () => <AppTag icon={<IconCheck />}>Nota validada</AppTag>;

const WithIconRemovable = () => <AppTag icon={<IconCheck />} removeLabel="Remover Nota validada">Nota validada</AppTag>;

Prop	Tipo	Padrão	Descrição
`children`*	`ReactNode`	`—`	Rótulo da tag.
`icon`	`ReactNode`	`—`	Ícone ou avatar de 16px antes do rótulo. Decorativo (`aria-hidden`).
`onRemove`	`(() => void)`	`—`	Quando informado, mostra o botão "x" que chama esta função.
`removeLabel`	`string`	`Remover`	Nome acessível do botão "x" (ex.: `Remover Marketing`). Padrão: `Remover`.