Chip

A button alternative to a badge.

Props

A Chip component has the following properties:

Name	Required	Description
`onclick`	yes	Click handler.
`class`	no	Additional classes.

Snippets

Name	Required	Description
`children`	yes	What the chip will display.
`icon`	no	Snippet to add an icon.

Examples

This is a plain chip:

<script lang="ts">
	import { Chip } from '$lib/components/index.js';
</script>

<Chip onclick={() => alert('You clicked this chip!')}>Plain Chip</Chip>

If you want to add an icon to the chip, you can do so with an icon snippet:

<script lang="ts">
	import { CircleCheckBig } from '@lucide/svelte';
	import { Chip } from '$lib/components/index.js';
</script>

<Chip onclick={() => alert('You clicked this chip!')} class="preset-filled-primary-100-900">
	{#snippet icon()}
		<CircleCheckBig />
	{/snippet}
	Icon Chip
</Chip>