Components

Chip component

On this page

The kit: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 with snippets. 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.

<script lang="ts">
	const filters = ['All', 'Design', 'Engineering', 'Product', 'Marketing'];
	let active = $state('All');
</script>

<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
	{#each filters as f (f)}
		<kit:chip
			is="button"
			variant={active === f ? 'filled' : 'outline'}
			onclick={() => (active = f)}
		>
			{f}
		</kit:chip>
	{/each}
</div>

kit:chip renders as a <div> by default. It becomes interactive automatically when onclick is attached, href is set, or is="button". Unlike kit:btn, it has no rounded prop the pill shape is fixed.

Examples of chip

Variants

Shows visual variants (filled, text, outline, link) to adapt the overall appearance of the list to graphic needs.

filled (default): solid background.
outline: visible border.
text : transparent background.
link: styled as a hyperlink, ideal for navigation or less prominent actions.
variant: 'filled' | 'outline' | 'text' | 'link = 'filled'

<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
	<kit:chip variant="filled">Filled</kit:chip>
	<kit:chip variant="outline">Outline</kit:chip>
	<kit:chip variant="text">Text</kit:chip>
	<kit:chip variant="link">Link</kit:chip>
</div>

size

With size, adjust the chip’s height and font size. From compact tags to larger status indicators, this prop allows you to create chips that fit perfectly into different contexts.

size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'

<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
	{#each ['xs', 'sm', 'md', 'lg', 'xl'] as size (size)}
		<kit:chip variant="outline" {size}>{size}</kit:chip>
	{/each}
</div>

prepend and append snippets

Use prepend for an icon before the label, and append for an action typically a remove button.

prepend: Snippet | undefined = undefined
append: Snippet | undefined = undefined

<script lang="ts">
	import { Tag, X, CircleCheck } from 'lucide-svelte';

	let tags = $state(['Svelte', 'TypeScript', 'CSS']);

	function remove(tag: string) {
		tags = tags.filter((t) => t !== tag);
	}
</script>

<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
	<kit:chip variant="outline">
		{#snippet prepend()}
			<kit:icon size="sm"><Tag /></kit:icon>
		{/snippet}
		Label
	</kit:chip>

	<kit:chip variant="filled">
		{#snippet prepend()}
			<kit:icon size="sm"><CircleCheck /></kit:icon>
		{/snippet}
		Verified
	</kit:chip>

	{#each tags as tag (tag)}
		<kit:chip variant="outline">
			{tag}
			{#snippet append()}
				<kit:btn icon variant="text" density="compact" size="xs" onclick={() => remove(tag)}>
					<kit:icon size="sm"><X /></kit:icon>
				</kit:btn>
			{/snippet}
		</kit:chip>
	{/each}
</div>

States

disabled dims and blocks interaction. readonly blocks interaction without the dim. active applies the pressed background useful for toggled filter chips.

active: boolean = false
disabled: boolean = false
readonly: boolean = false

<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
	<kit:chip variant="outline" active>Active</kit:chip>
	<kit:chip variant="outline" disabled>Disabled</kit:chip>
	<kit:chip variant="outline" readonly>Readonly</kit:chip>
	<kit:chip variant="filled" disabled>Disabled filled</kit:chip>
</div>

labelStyle

labelStyle applies uppercase, bold, and slight letter-spacing suited for category or status badges.

labelStyle: labelStyle = false

<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
	<kit:chip variant="filled" labelStyle>New</kit:chip>
	<kit:chip variant="outline" labelStyle>Beta</kit:chip>
	<kit:chip variant="outline" labelStyle>Deprecated</kit:chip>
	<kit:chip variant="filled" labelStyle size="sm">Pro</kit:chip>
</div>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

import { Chip } from 'lapikit/components';

API Reference

kit:chip

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element. Overridden by `href` or event handlers.	`'div'`
s-class	enum	Sets className on chip.
s-style	enum	Sets styles on chip.
variant	enum	Visual style.	`'filled'`
size	enum	Height and font size.	`'md'`
density	enum	Padding and height multiplier.	`'default'`
href	`string`	Renders as `<a>`. Cleared when `disabled` or `readonly`.
rounded	enum	Border radius.	`'full'`
active	`boolean`	Applies the pressed background.	`false`
disabled	`boolean`	Dims and blocks all interaction.	`false`
readonly	`boolean`	Blocks interaction without disabled styling.	`false`
labelStyle	`boolean`	Uppercase, bold, letter-spacing for badges and categories.	`false`
loading	`boolean`	Shows a spinner, hides content.
noRipple	`boolean`	Disables the ripple animation on click.
prepend	`Snippet`	Content before the label.
append	`Snippet`	Content after the label.
load	`Snippet`	Custom spinner content shown while loading.
children	`Snippet`	Chip label.
color	`string`	Foreground color override (`--kit-chip-fg`).
background	`string`	Background color override (`--kit-chip-bg`).
elevation	`ElevationState`enum	Add shadow effect.

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