Theme:
Ui3nChip
Chip component for displaying tags, labels, and compact information elements.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
height | string | number | undefined | — | Chip height |
maxWidth | string | number | undefined | — | Chip maximum width |
plain | boolean | undefined | false | Chip plain style |
round | boolean | undefined | true | Chip round shape |
closeable | boolean | undefined | false | Chip closeable |
color | string | undefined | — | Chip color |
textSize | string | number | undefined | — | Text size |
textColor | string | undefined | — | Text color |
disabled | boolean | undefined | — | Chip disabled state |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
click | value: MouseEvent | — |
close | | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#left | { size: number; color: string; } | Left slot |
#default | — | Default slot |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-chip-bg-color | var(--color-bg-control-secondary-default) |
--ui3n-chip-font-color | var(--color-text-control-primary-default) |
--ui3n-chip-font-size | 10px |
--ui3n-chip-height | 24px |
--ui3n-chip-max-width | 200px |
--ui3n-chip-padding | 0 calc(var(--_chip-height) / 3) |
Usage Examples
Simple chip
Simple chip
Basic chip usage with default settings
Chip sizes
Chip sizes
Different chip heights: 20px, 24px (default), 32px, 40px
Chip with left slot
Chip with left slot
Chip with icon or avatar in the left slot
Closeable chips
Closeable chips
Chips with close button using the closeable prop
Color customization
Color customization
Custom background color, text color and text size
Plain style
Plain style
Chip with border outline using the plain prop