Badge
Los badges marcan el estado de algo en una palabra: al día, por vencer, en camino. También destacan novedades y descuentos sin robar protagonismo.
JTRX-12
Toyota Yaris
Mantención 10.000 km
Hoy, 10:00
Revisión técnica
Vence en marzo 2027
SOAP 2026
Vence en 12 días
Multa TAG
Autopista Central
Anatomía
Una etiqueta de una o dos palabras sobre un fondo suave. El punto es opcional y refuerza que se trata de un estado.
Al día
- Contenedor
- Punto opcional
- Etiqueta
Variantes
Los tonos de estado siguen el semáforo de siempre. Los de marca no comunican estado, solo llaman la atención.
Al díaPor vencerVencidoMultaBorrador
Estadosuccess, warning, error, error-solid y neutral. Comunican cómo está algo.
NuevoPlan anualPopularAhorra 15%-20%
Marcaprimary, secondary, accent, volt y dark. Destacan novedades y descuentos.
Más vendido
GlassSobre fotos o superficies oscuras, cuando un fondo sólido taparía la imagen.
Tamaños
Plan anualPlan anualPlan anual
sm, md y lgsm es el tamaño por defecto para listas y cards. lg queda para precios y descuentos destacados.
Estados
Al día
Con puntoMarca un estado estable, como un documento al día.
En camino
Con pulsoSolo para algo que está pasando ahora mismo.
Pagado
Con íconoUn ícono pequeño antes de la etiqueta cuando suma claridad.
Uso
Por vencer
Etiquetas de una o dos palabras que se leen de un vistazo.
Tu SOAP vence en 12 días, renuévalo
Frases largas. Si necesitas explicar, usa un InfoCallout.
En camino
El pulso solo en estados en vivo, como un técnico en camino.
Pagado
Pulso en estados que ya terminaron. Distrae sin informar.
Código
import { Badge } from '@carvuk/design-system/components/badge';
<Badge variant='success'>Al día</Badge>
<Badge variant='warning' size='md'>Por vencer</Badge>
<Badge variant='volt' dot pulse>En camino</Badge>