componentes / tag

Tag

Etiqueta para categorías o filtros, con botón de quitar opcional.

Cómo usar

`variant` es `filled` u `outline`. Pasar `onDismiss` renderiza un `<button>` real para quitar; da a cada uno un `dismissLabel` específico para que los lectores de pantalla los distingan. Para estado semántico usa `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="Quitar React">React</Tag>

Variantes

preview

filled

outline

variantes.tsx

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

Colores

preview

primary

success

warning

danger

colores.tsx

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

Tamaños

preview

tamanos.tsx

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

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

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

Props

Prop	Valores	Predeterminado	Descripción
variant	filled \| outline	filled	Fondo coloreado o solo borde
variantColor	primary \| success \| warning \| danger	ninguno	Color (neutro si se omite)
size	sm \| md \| lg	md	Tamaño del elemento y del texto
radius	none \| sm \| md \| lg \| full	md	Redondeo de las esquinas
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema) para la tag (reemplaza a variantColor)
onDismiss	() => void	ninguno	Renderiza un botón de quitar que la llama
dismissLabel	string	Remove	Nombre accesible del botón de quitar
(nativas)	span	ninguno	Todas las props nativas del elemento, className, ref, etc.