componentes / tag

Tag

Rótulo para categorias ou filtros, com botão de remover opcional.

Como usar

`variant` é `filled` ou `outline`. Passar `onDismiss` renderiza um `<button>` real de remover; dê a cada um um `dismissLabel` específico para leitores de tela os distinguirem. Para status semântico use `Badge`.

preview

DesignCódigo

ReactNext.jsTailwind

Tag.tsx

import { Tag } from "vaiperui";
 
<Tag>Design</Tag>
<Tag variant="outline">Code</Tag>
<Tag onDismiss={() => remove("React")} dismissLabel="Remover React">React</Tag>

Variantes

preview

filled

outline

variantes.tsx

<Tag>filled</Tag>
<Tag variant="outline">outline</Tag>

Cores

preview

primary

success

warning

danger

cores.tsx

<Tag variantColor="primary">primary</Tag>
<Tag variantColor="success">success</Tag>
<Tag variantColor="warning">warning</Tag>
<Tag variantColor="danger">danger</Tag>

Tamanhos

preview

tamanhos.tsx

<Tag size="sm">sm</Tag>
<Tag size="md">md</Tag>
<Tag size="lg">lg</Tag>

Cor personalizada

preview

Laranja

Violeta

cor-personalizada.tsx

<Tag customColor="#ff6600" />
<Tag customColor={{ light: "#a855f7", dark: "#fde047" }} />

Props

Prop	Valores	Padrão	Descrição
variant	filled \| outline	filled	Fundo colorido ou apenas borda
variantColor	primary \| success \| warning \| danger	nenhum	Cor (neutra se omitida)
size	sm \| md \| lg	md	Tamanho do elemento e do texto
radius	none \| sm \| md \| lg \| full	md	Arredondamento dos cantos
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema) para a tag (substitui variantColor)
onDismiss	() => void	nenhum	Renderiza um botão de remover que a chama
dismissLabel	string	Remove	Nome acessível do botão de remover
(nativas)	span	nenhum	Todas as props nativas do elemento, className, ref etc.