Badge
UIEtiqueta para mostrar estados, categorías o contadores con colores semánticos y variantes.
Uso básico
Nuevo
Activo
Pendiente
<x-kore::badge label="Nuevo" />
<x-kore::badge label="Activo" color="success" />
<x-kore::badge label="Pendiente" color="warning" variant="outline" /><x-kore::badge label="Nuevo" />
<x-kore::badge label="Activo" color="success" />
<x-kore::badge label="Pendiente" color="warning" variant="outline" />Colores
Siete colores semánticos disponibles.
Primary
Secondary
Success
Warning
Destructive
Info
Muted
<x-kore::badge label="Primary" color="primary" />
<x-kore::badge label="Secondary" color="secondary" />
<x-kore::badge label="Success" color="success" />
<x-kore::badge label="Warning" color="warning" />
<x-kore::badge label="Destructive" color="destructive" />
<x-kore::badge label="Info" color="info" />
<x-kore::badge label="Muted" color="muted" /><x-kore::badge label="Primary" color="primary" />
<x-kore::badge label="Secondary" color="secondary" />
<x-kore::badge label="Success" color="success" />
<x-kore::badge label="Warning" color="warning" />
<x-kore::badge label="Destructive" color="destructive" />
<x-kore::badge label="Info" color="info" />
<x-kore::badge label="Muted" color="muted" />Variantes
Tres variantes: soft (default), solid y outline.
Soft
Solid
Outline
<x-kore::badge label="Soft" variant="soft" color="primary" />
<x-kore::badge label="Solid" variant="solid" color="primary" />
<x-kore::badge label="Outline" variant="outline" color="primary" /><x-kore::badge label="Soft" variant="soft" color="primary" />
<x-kore::badge label="Solid" variant="solid" color="primary" />
<x-kore::badge label="Outline" variant="outline" color="primary" />Tamaños
Tres tamaños: sm, md (default), lg.
Small
Medium
Large
<x-kore::badge label="Small" size="sm" />
<x-kore::badge label="Medium" size="md" />
<x-kore::badge label="Large" size="lg" /><x-kore::badge label="Small" size="sm" />
<x-kore::badge label="Medium" size="md" />
<x-kore::badge label="Large" size="lg" />Con icono
Agrega un icono Lucide al badge.
Verificado
Alerta
Info
<x-kore::badge label="Verificado" icon="check" color="success" />
<x-kore::badge label="Alerta" icon="alert-triangle" color="warning" />
<x-kore::badge label="Info" icon="info" color="info" /><x-kore::badge label="Verificado" icon="check" color="success" />
<x-kore::badge label="Alerta" icon="alert-triangle" color="warning" />
<x-kore::badge label="Info" icon="info" color="info" />Dot
Renderiza solo un punto de color, sin texto.
<x-kore::badge :dot="true" color="success" />
<x-kore::badge :dot="true" color="destructive" />
<x-kore::badge :dot="true" color="warning" /><x-kore::badge :dot="true" color="success" />
<x-kore::badge :dot="true" color="destructive" />
<x-kore::badge :dot="true" color="warning" />Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label
|
string|null | null | Texto del badge |
icon
|
string|null | null | Icono Lucide |
size
|
string | md | Tamaño: sm, md, lg |
variant
|
string | soft | Variante: solid, soft, outline |
color
|
string | primary | Color: primary, secondary, success, warning, destructive, info, muted |
dot
|
bool | false | Renderiza solo un punto de color |