componentes / badge

Badge

Pequeña etiqueta de estado con colores semánticos y un punto opcional.

Cómo usar

Usa `status` para el color semántico y `dot` para un indicador decorativo. No es interactivo. El color no debe ser la única señal, así que el texto debe decir el estado. Para categorías o filtros usa `Tag`.

preview

ActivoAtenciónRechazado

Badge.tsx

import { Badge } from "vaiperui";
 
<Badge status="success" dot>Activo</Badge>
<Badge status="warning">Atención</Badge>

Estados

preview

success

error

warning

info

neutral

pending

estados.tsx

<Badge status="success">success</Badge>
<Badge status="error">error</Badge>
<Badge status="warning">warning</Badge>
<Badge status="info">info</Badge>
<Badge status="neutral">neutral</Badge>
<Badge status="pending">pending</Badge>

Con punto

preview

success

error

warning

info

neutral

pending

punto.tsx

<Badge status="success" dot>success</Badge>
<Badge status="error" dot>error</Badge>
<Badge status="warning" dot>warning</Badge>
<Badge status="info" dot>info</Badge>
<Badge status="neutral" dot>neutral</Badge>
<Badge status="pending" dot>pending</Badge>

Tamaños

preview

tamanos.tsx

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

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

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

Props

Prop	Valores	Predeterminado	Descripción
status	success \| error \| warning \| info \| neutral \| pending	neutral	Color semántico
dot	boolean	false	Punto decorativo antes del texto
size	sm \| md \| lg	md	Tamaño del elemento y del texto
radius	none \| sm \| md \| lg \| full	full	Redondeo de las esquinas
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema) para el badge (reemplaza a status)
(nativas)	span	ninguno	Todas las props nativas del elemento, className, ref, etc.