A compact label for statuses and counts, in five colours and three sizes, with an optional leading icon.
Ejemplos
Colours
Five colours, with and without a leading icon.
NewActiveBetaErrorDraft
<div class="flex flex-wrap items-center gap-2">
<UiBadge color="primary">New</UiBadge>
<UiBadge color="green" icon="mdi:check">Active</UiBadge>
<UiBadge color="amber">Beta</UiBadge>
<UiBadge color="red">Error</UiBadge>
<UiBadge color="gray">Draft</UiBadge>
</div>Sizes
Three sizes: xs (default), sm and md.
Extra smallSmallMedium
<div class="flex flex-wrap items-center gap-2">
<UiBadge size="xs">Extra small</UiBadge>
<UiBadge size="sm">Small</UiBadge>
<UiBadge size="md">Medium</UiBadge>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| color | string | 'primary' | Badge colour. primarygrayredgreenamber |
| size | string | 'xs' | Badge size. xssmmd |
| icon | string | '' | Leading MDI icon. |
Slots
| Slot | Descripción |
|---|---|
default | Badge text or content. |