Lapikit

Chip component

Chip

The Chip component displays small interactive labels, perfect for representing status, categories, filters or actions. Compact, stylable and highly flexible, it can be clicked, disabled, loaded, closed or enriched via slots. It supports different variants, states, densities and sizes, to suit all UI contexts. It can be used alone, in groups, or as the basis for a tag or filter system.

Default

Examples of chip

Base

A simple, non-interactive chip, perfect for static display.

Default

Closable

Adds a close icon to dynamically remove the chip. Useful for filters or modifiable tags.

Default content

Color

Customize the color of the chip’s text and/or background. Ideal for visually highlighting certain elements.

Primary

Secondary

Tertiary

Primary variables

Outline colors

Composable

Shows how to use slots (prepend, append, close) to inject customized content such as icons or rich text.

Default

Outline

Density

Controls vertical density: compact, comfortable or default. Handy for adapting to the overall density of the interface.

compact

default

comfortable

Disabled

Displays a deactivated, non-interactive, visually faded chip.

disabled

anchor

Event

Demonstrates event management (e.g. click) to trigger an action from a chip.

disabled

anchor

Loading

Displays a loading status, blocking interactions during processing. Customize content with snippet load.

Default

Outline

Size

Shows different chip sizes, fixed or responsive via an object.

chip xs

chip sm

chip default

chip md

chip lg

chip xl

Snippet

Details advanced snippets (prepend, append, close, load) for creating complex chips.

Default content

State

Applies a predefined status style: info, warning, error, or success.

Info

Success

Warning

Error

Info

Variant

Changes the overall style of the chip with filled or outline variants.

Default

Outline

API Reference

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
is	enum	Makes the component `<a>`, `<button>`, `span` or `div`.	`div`	`button` \| `a` \| `div` \| `span`
href	string	Add path or url	undefined
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color to text or icons.	undefined
background	string	Apply a custom background color.	undefined
density	enum	Controls vertical density	`default`	`compact` \| `comfortable` \| `default`
rounded	string	Controls item rounding (`none`, `sm`, `md`, `lg`, etc.).	`md`
variant	enum	Sets the visual style of the Chip.	`filled`	`outline` \| `filled`
active	boolean	Displays active status	false
disabled	boolean	Deactivates the Chip, preventing any interaction.	false
loading	boolean	Displays a spinner and disables the Chip.	false
warning	boolean	Apply a visual style of warning.	false
info	boolean	Applies an informative style.	false
success	boolean	Apply a success style (confirmation, validation, etc.).	false
error	boolean	Apply a visual style of error.	false
size	enum \| `{enum: enum}`	Set Chip size: xs, sm, md, lg, xl or full.	`md`	`xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`
type	enum	Apply a visual style of error.	`button`	`button`
label	string	Chip text (if not defined by Snippet children)	undefined
closable	boolean	Displays a close icon	undefined
noRipple	boolean	Deactivates ripple effect	false
close	Snippet	Snippet to customize the closing icon	undefined
load	Snippet	Content displayed during downloading	undefined
append	Snippet	Content displayed after the main content	undefined
prepend	Snippet	Content displayed before main content	undefined

Variables CSS

variable	default	description
`–-chip-color`	`–-kit-on-container`	Text color
`–-chip-background`	`–-kit-container`	Background color
`–-chip-radius`	`--kit-radius-full`	Chip edge radius

Chips are often used in a Toolbar or as a complement in a Card to structure information and List.