Datos

Badge

Etiquetas pequeñas para estado, categoría y conteos.

import { Badge, CountBadge } from '@alea/ui';

Ejemplos

Tonos

Soft por defecto, solid y outline para más o menos peso.

neutralaccentsuccesswarningdangerinfo

Estados y contadores

Un punto para estados en vivo, CountBadge para números.

LiveWaiting for approvalNew

Tamaños, íconos, formas y un punto en vivo

sm, md y lg; un ícono antes del texto; pill o rounded; dot="pulse" respira para cosas en vivo. CountBadge se oculta en cero (showZero lo mantiene) y puede ser solo un punto.

Size smSize mdSize lg

VerifiedPendingLiveOnline

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

soft

outline

solid

pill

rounded

neutral

accent

success

warning

danger

info

dot

Appearanceappearance
Shapeshape
Sizesize
Tonetone
Punto

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Medidas

Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.

size	Alto	Ancho	Padding (y · x)	Radio	Tamaño de texto	Icono	Separación
`sm`	-	-	-	-	-	-	-
`md`	-	-	-	-	-	-	-
`lg`	-	-	-	-	-	-	-

Cada tamaño y espacio es múltiplo de 4 px.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-accent-on…
--alea-accent-solid…
--alea-accent-strong…
--alea-accent-subtle…
--alea-chip-bg…
--alea-chip-text…
--alea-status-danger…
--alea-status-danger-bg…
--alea-status-danger-on-solid…
--alea-status-danger-solid…
--alea-status-info…
--alea-status-info-bg…
--alea-status-info-on-solid…
--alea-status-info-solid…
--alea-status-success…
--alea-status-success-bg…
--alea-status-success-on-solid…
--alea-status-success-solid…
--alea-status-warning…
--alea-status-warning-bg…
--alea-status-warning-on-solid…
--alea-status-warning-solid…
--alea-surface-raised…
--alea-text-muted…

Radius

--alea-radius-full…

Type

--alea-font-family-body…
--alea-font-size-2xs…
--alea-font-size-sm…
--alea-font-size-xs…
--alea-font-weight-semibold…

Motion

--alea-motion-ease-out…

Props

`Badge` props

Ver 10 props heredadas

Una pequeña etiqueta de estado o cantidad: seis tonos, tres estilos, tres tamaños, un punto o un ícono. No es interactiva.

Prop	Tipo	Por defecto	Descripción
`appearance`	`"soft" \| "outline" \| "solid"`	`'soft'`	soft (con tinte, por defecto), solid u outline.
`dot`	`boolean \| "pulse"`	-	Un punto antes del texto, para estados. pulse lo hace respirar, para cosas en vivo.
`icon`	`ReactNode`	-	Un ícono antes del texto.
`shape`	`"pill" \| "rounded"`	-	pill (por defecto) o rounded (esquinas de 6 px).
`size`	`"sm" \| "md" \| "lg"`	`'md'`	sm 20 px, md 24 px (por defecto) o lg 28 px.
`tone`	`"danger" \| "neutral" \| "accent" \| "success" \| "warning" \| "info"`	`'neutral'`	neutral, accent, success, warning, danger o info.

`CountBadge` props

Ver 10 props heredadas

Una burbuja numérica para notificaciones. Se oculta en cero salvo con showZero.

Prop	Tipo	Por defecto	Descripción
`count`obligatoria	`number`	-	El número a mostrar.
`dot`	`boolean`	-	Solo un punto, sin el número (los lectores de pantalla siguen escuchando la cantidad).
`label`	`string`	-	Nombre para lectores de pantalla, por ejemplo "mensajes sin leer".
`max`	`number`	`99`	Muestra max+ por encima de esto. Por defecto 99.
`showZero`	`boolean`	-	Muestra 0 en lugar de ocultar la burbuja.
`size`	`"sm" \| "md"`	-	sm (16 px) o md (20 px, por defecto).
`tone`	`"danger" \| "neutral" \| "accent" \| "success" \| "warning" \| "info"`	`'accent'`	Color de la burbuja. Por defecto accent.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Tone × appearance

Oscuro

Badge dark
	`appearance="soft"`	`appearance="solid"`	`appearance="outline"`
`tone="neutral"`	Badge	Badge	Badge
`tone="accent"`	Badge	Badge	Badge
`tone="info"`	Badge	Badge	Badge
`tone="success"`	Badge	Badge	Badge
`tone="warning"`	Badge	Badge	Badge
`tone="danger"`	Badge	Badge	Badge

Claro

Badge light
	`appearance="soft"`	`appearance="solid"`	`appearance="outline"`
`tone="neutral"`	Badge	Badge	Badge
`tone="accent"`	Badge	Badge	Badge
`tone="info"`	Badge	Badge	Badge
`tone="success"`	Badge	Badge	Badge
`tone="warning"`	Badge	Badge	Badge
`tone="danger"`	Badge	Badge	Badge

Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.

Size