K
KoreUI

Chip

UI

Elemento compacto para representar etiquetas, filtros o selecciones con soporte para iconos, imágenes y eliminación.

Uso básico

Tag Active Laravel 
<x-kore::chip label="Tag" />
<x-kore::chip label="Active" color="success" />
<x-kore::chip label="Laravel" icon="code" color="primary" />
<x-kore::chip label="Tag" />
<x-kore::chip label="Active" color="success" />
<x-kore::chip label="Laravel" icon="code" color="primary" />

Colores

Seis colores semánticos disponibles.

Primary Success Warning Destructive Info Muted 
<x-kore::chip label="Primary" color="primary" />
<x-kore::chip label="Success" color="success" />
<x-kore::chip label="Warning" color="warning" />
<x-kore::chip label="Destructive" color="destructive" />
<x-kore::chip label="Info" color="info" />
<x-kore::chip label="Muted" color="muted" />
<x-kore::chip label="Primary" color="primary" />
<x-kore::chip label="Success" color="success" />
<x-kore::chip label="Warning" color="warning" />
<x-kore::chip label="Destructive" color="destructive" />
<x-kore::chip label="Info" color="info" />
<x-kore::chip label="Muted" color="muted" />

Variantes

Tres variantes: soft (default), solid y outline.

Soft Solid Outline 
<x-kore::chip label="Soft" variant="soft" color="primary" />
<x-kore::chip label="Solid" variant="solid" color="primary" />
<x-kore::chip label="Outline" variant="outline" color="primary" />
<x-kore::chip label="Soft" variant="soft" color="primary" />
<x-kore::chip label="Solid" variant="solid" color="primary" />
<x-kore::chip label="Outline" variant="outline" color="primary" />

Con icono

Agrega un icono Lucide al chip.

Laravel Favorito Configuración 
<x-kore::chip label="Laravel" icon="code" color="primary" />
<x-kore::chip label="Favorito" icon="heart" color="destructive" />
<x-kore::chip label="Configuración" icon="settings" />
<x-kore::chip label="Laravel" icon="code" color="primary" />
<x-kore::chip label="Favorito" icon="heart" color="destructive" />
<x-kore::chip label="Configuración" icon="settings" />

Con imagen

Avatar circular junto al texto del chip.

John Doe 
<x-kore::chip label="John Doe" image="https://i.pravatar.cc/150?u=20" />
<x-kore::chip label="John Doe" image="https://i.pravatar.cc/150?u=20" />

Removable

Muestra un botón X para eliminar el chip. Dispara el evento chip-removed.

Remove me John Doe 
<x-kore::chip label="Remove me" :removable="true" />
<x-kore::chip label="John Doe" image="https://i.pravatar.cc/150?u=21" :removable="true" />
<x-kore::chip label="Remove me" :removable="true" />
<x-kore::chip label="John Doe" image="https://i.pravatar.cc/150?u=21" :removable="true" />

Props

Prop Tipo Default Descripción
label string|null null Texto del chip
icon string|null null Icono Lucide
image string|null null URL de imagen (avatar circular)
removable bool false Muestra botón para eliminar
color string muted Color: primary, success, warning, destructive, info, muted
size string md Tamaño: sm, md
variant string soft Variante: soft, solid, outline