Skip to content

Badge

Etiqueta ligera para mostrar información resaltada con variantes de color.

Badge

Demo

PrimarySecondarySuccessWarningDanger
vue
<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>

Props

color

Define el color semántico del badge.

PrimarySuccessDanger
vue
<Badge color="primary">Primary</Badge>
<Badge color="success">Success</Badge>
<Badge color="danger">Danger</Badge>

API

PropTipoDefaultDescripción
color'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark''primary'Color semántico del badge

Tokens usados

--color-{name}, --bg, --text, --border, --font-mono