Componentes · Ola 1 · Contenido

Badge

Etiqueta corta para un estado, una categoría o un plan. Tiene una variante neutral, una sólida, la de la marca y una por estado. El punto opcional, con un brillo tenue, marca un estado vivo, como un servicio activo o un despliegue en curso.

import { Badge } from '@archeblack/ui';

Ejemplos

Variantes

neutral por defecto, brand para la marca del producto y solid para destacar.

Borrador Nuevo Pro

Svelte

<script lang="ts">
	import { Badge } from '@archeblack/ui';
</script>

<Badge>Borrador</Badge>
<Badge variant="brand">Nuevo</Badge>
<Badge variant="solid">Pro</Badge>

Estados

info, success, warning y danger, con dot para un estado vivo. El texto nombra el estado.

Desplegando Activo Degradado Error Detenido

Svelte

<script lang="ts">
	import { Badge } from '@archeblack/ui';
</script>

<!-- El punto marca un estado vivo; el texto es el que lo nombra. -->
<Badge variant="info" dot>Desplegando</Badge>
<Badge variant="success" dot>Activo</Badge>
<Badge variant="warning" dot>Degradado</Badge>
<Badge variant="danger" dot>Error</Badge>
<Badge>Detenido</Badge>

Tallas

sm (20 px de alto y menos relleno) para tablas y listas densas; md (22 px) en el resto de la interfaz. Las dos usan texto de 13 px.

Activo Activo Plan Estudio Plan Estudio

Svelte

<script lang="ts">
	import { Badge } from '@archeblack/ui';
</script>

<Badge size="sm" variant="success" dot>Activo</Badge>
<Badge variant="success" dot>Activo</Badge>
<Badge size="sm" variant="brand">Plan Estudio</Badge>
<Badge variant="brand">Plan Estudio</Badge>

Props

Props de Badge
Prop	Descripción
`variant?` `'neutral' \| 'solid' \| 'brand' \| 'danger' \| 'warning' \| 'success' \| 'info'` Por defecto `'neutral'`	Color. `neutral` para etiquetas sin tono; `solid` para destacar (el color primario); `brand` para la marca del producto; los estados con su color, su fondo y su borde suaves.
`size?` `'sm' \| 'md'` Por defecto `'md'`	Talla: `md` (22 px de alto) en la interfaz; `sm` (20 px de alto y menos relleno) en tablas densas y listas. Las dos con texto de 13 px.
`dot?` `boolean` Por defecto `false`	Punto con un brillo tenue delante del texto, del color de la variante. Marca un estado vivo; es decorativo.
`children?` `Snippet`	El texto del badge: una o dos palabras.
`class?` `ClassValue`	Clases del producto; se suman a `arche-badge`.
`...rest` `HTMLAttributes<HTMLSpanElement>`	Cualquier otro atributo va al `<span>` raíz.

Accesibilidad

Es un <span> sin rol: el lector de pantalla lee su texto como parte del contenido que lo rodea.
El color nunca comunica solo: cada estado lleva su texto («Activo», «Error»). El punto es decorativo (aria-hidden="true").
El texto (13 px en las dos tallas) pasa AA (4,5:1) contra el fondo de cada variante, incluidos los fondos suaves de los estados y el de la marca de cada producto.
Si el badge cambia mientras la persona mira (un despliegue que termina), el aviso lo da una región viva aparte, como un Alert con live: el badge no se anuncia solo.
En colores forzados el borde se mantiene y el punto toma el color del texto del sistema.

Qué evitar

Un badge con onclick o dentro de un link para filtrar o navegar. Un Button o un link. El badge no es interactivo y no recibe foco.
Un badge solo con el punto, o solo con el color, para indicar un estado. Siempre el texto del estado. El punto acompaña, no reemplaza.
Frases largas o varios badges seguidos que dicen casi lo mismo. Una o dos palabras y un solo badge por dato. Lo demás va en el texto.
Usar danger o warning para destacar algo que no es un problema. solid o brand para destacar; los estados quedan para los estados.
Cambiar el color con estilos propios para crear variantes nuevas. Las variantes existentes. Si falta una, se suma al sistema con su chequeo de contraste.