Badge

Etiqueta de estado o categoría de una o dos palabras, junto a un nombre o en una celda de tabla.

Cuándo usarlo

Props. color (gray · brand · success · warning · error · slate · sky · blue · indigo · purple · pink · orange), type (pill redonda · badge radius-md · modern blanca con sombra), size (sm 22px · md 24 · lg 28), dot, onRemove.

Colores. Usan la escala utility: fondo -50, borde -200, texto -700, punto -500. El estado no debe depender solo del color: la palabra ("Pagado", "Vencido") es obligatoria.

No. Nada de frases. Si necesitas más de tres palabras es un Alert o un texto de apoyo.

Diferencia con la vista previa de la guía. En la vista previa, el badge modern sale con el fondo y el texto de su color porque en la hoja de estilos de la guía la regla de color pisa a la de modern. Aquí se sigue la ficha: modern es blanca (bg-primary, text-secondary) con sombra, y solo el punto lleva el color.

Ejemplos

BorradorNuevoPagadoPendienteVencidoInfoBeta

ActivoEn líneasmlgFiltro

Props

Prop	Tipo	Por defecto	Descripción
`color`	`"gray" · "brand" · "error" · "warning" · "success" · "slate" · "sky" · "blue" · "indigo" · "purple" · "pink" · "orange"`	`gray`	Escala utility: fondo `-50`, borde `-200`, texto `-700`, punto `-500`.
`type`	`"pill" · "badge" · "modern"`	`pill`	`pill` redonda · `badge` con `radius-md` · `modern` blanca con sombra.
`size`	`"sm" · "md" · "lg"`	`md`	Alto: `sm` 22 · `md` 24 · `lg` 28.
`dot`	`boolean`	—	Punto de color antes del texto.
`icon`	`IconName`	—	Icono de 12px antes del texto.
`onRemove`	`(() => void)`	—	Muestra una X para quitarlo.
`removeLabel`	`string`	`Quitar`	Nombre accesible de la X. Por defecto, "Quitar".
`children`obligatoria	`ReactNode`	—	Una o dos palabras: el estado no puede depender solo del color.
`className`	`string`	—

Código

import { Badge } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Badge color="success">Pagado</Badge>
			<Badge type="modern" color="success" dot>En línea</Badge>
		</>
	);
}

---
import { Badge } from "@jotis-me/react";
---

<Badge color="success">Pagado</Badge>
<Badge type="modern" color="success" dot>En línea</Badge>

Con onRemove necesita una función: envuélvelo en un .tsx y úsalo como isla client:load.