Dasar UI Library

Chip

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat cupiditate odit ipsa quaerat blanditiis vel eveniet, aut esse laudantium similique quo nobis odio nostrum ipsam consequatur. Magni odit maiores nesciunt?

Variant

Appearance

Radius

Sizes

More example

API Reference

Property	Type	Default	Description
`label`	`string`	-	The text content to display inside the chip. Can also be provided via the [chip-label] slot.
`variant`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'secondary' \| 'ghost'`	'primary'	Defines the semantic color intent of the chip.
`appearance`	`'solid' \| 'subtle' \| 'outline'`	'solid'	Defines the fill and border style of the chip.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	'xs'	Controls the overall size, padding, and typography of the chip.
`radius`	`ScaleAttributeType`	'md'	Sets the border radius curve. Defaults to a pill shape (full).
`icon-name`	`string`	-	The registry key of an icon to render at the start of the chip.
`removable`	`boolean`	false	If true, displays a trailing close icon and enables the onRemoved event.
`close-icon-name`	`string`	'x'	The registry key for the close icon. Only visible when removable is true.
`disabled`	`boolean`	false	Mutes the visual state and prevents click and remove events.
`fluid`	`boolean`	false	Forces the chip to fill 100% of its parent container width.
`container-class / content-class / label-class`	`ClassType`	null	Accepts custom CSS classes to inject into specific DOM layers of the chip.
`container-style / content-style / label-style`	`StyleType`	null	Accepts custom inline styles to inject into specific DOM layers of the chip.
`(onClick)`	`EventEmitter<Event>`	-	Emitted when the main chip body is clicked. Automatically ignores disabled states.
`(onRemove)`	`EventEmitter<Event>`	-	Emitted when the trailing close icon is clicked. Automatically prevents event bubbling.