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	24	Chip height
maxWidth	string | number | undefined	200	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	"var(--color-bg-control-secondary-default)"	Chip color
textSize	string | number | undefined	10	Text size
textColor	string | undefined	"var(--color-text-control-primary-default)"	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

Usage Examples

Simple chip

Simple chip

Basic chip usage with default settings

Default chip

Another chip

Tag label

Chip sizes

Chip sizes

Different chip heights: 20px, 24px (default), 32px, 40px

Small (20px)

Default (24px)

Medium (32px)

Large (40px)

Chip with left slot

Chip with left slot

Chip with icon or avatar in the left slot

Vue.js

TypeScript

Vite

Closeable chips

Closeable chips

Chips with close button using the closeable prop

JavaScript

Python

Go

Rust

Color customization

Color customization

Custom background color, text color and text size

Primary

Secondary

Success

Error

Warning

Plain style

Plain style

Chip with border outline using the plain prop

Plain chip

Primary outline

Success outline

Closeable outline