---
import { CheckIcon } from 'lucide-react';
---
<div class="flex items-center gap-2">
<!-- A standard chip -->
<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal">Chip</button>
<!-- A chip + icon -->
<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal">
<span>Chip</span>
<CheckIcon size={14} />
</button>
<!-- A simple icon chip -->
<button type="button" class="chip-icon preset-outlined-surface-400-600 hover:preset-tonal">
<CheckIcon size={14} />
</button>
</div>Assist Chips
Represent a group of related contextual choices.
Home Automation
Control your smart home with a single tap. Choose one of the quick actions below to get started.
import { SunIcon, AlarmClockIcon, AppWindowIcon } from 'lucide-react';
export default function Assist() {
return (
<div className="card preset-filled-surface-100-900 p-4 space-y-4 w-full max-w-md overflow-hidden">
<header>
<h2 className="h6">Home Automation</h2>
</header>
<article className="space-y-4">
<p className="opacity-60">Control your smart home with a single tap. Choose one of the quick actions below to get started.</p>
</article>
<hr className="hr" />
<footer className="flex items-center justify-start gap-2 overflow-x-auto [scrollbar-width:none]">
<button type="button" className="chip preset-outlined-surface-400-600">
<SunIcon size={14} />
<span>Turn on lights</span>
</button>
<button type="button" className="chip preset-outlined-surface-400-600">
<AlarmClockIcon size={14} />
<span>Set alarm</span>
</button>
<button type="button" className="chip preset-outlined-surface-400-600">
<AppWindowIcon size={14} />
<span>Close blinds</span>
</button>
</footer>
</div>
);
}Home Automation
Control your smart home with a single tap. Choose one of the quick actions below to get started.
<script lang="ts">
import AlarmClockIcon from '@lucide/svelte/icons/alarm-clock';
import AppWindowIcon from '@lucide/svelte/icons/app-window';
import SunIcon from '@lucide/svelte/icons/sun';
</script>
<div class="card preset-filled-surface-100-900 p-4 space-y-4 w-full max-w-md overflow-hidden">
<header>
<h2 class="h6">Home Automation</h2>
</header>
<article class="space-y-4">
<p class="opacity-60">Control your smart home with a single tap. Choose one of the quick actions below to get started.</p>
</article>
<hr class="hr" />
<footer class="flex items-center justify-start gap-2 overflow-x-auto [scrollbar-width:none]">
<button type="button" class="chip preset-outlined-surface-400-600">
<SunIcon size={14} />
<span>Turn on lights</span>
</button>
<button type="button" class="chip preset-outlined-surface-400-600">
<AlarmClockIcon size={14} />
<span>Set alarm</span>
</button>
<button type="button" class="chip preset-outlined-surface-400-600">
<AppWindowIcon size={14} />
<span>Close blinds</span>
</button>
</footer>
</div>Filter Chips
Represent a canned selection of options to choose from.
Favorite Color
import { useState } from 'react';
import { CheckIcon } from 'lucide-react';
export default function Filter() {
const colors = ['red', 'green', 'blue'];
const [color, setColor] = useState(colors[0]);
return (
<div className="card preset-filled-surface-100-900 w-full max-w-md p-4">
<div className="flex justify-center items-center gap-2">
<span className="text-sm opacity-60">Favorite Color</span>
{/* --- */}
{colors.map((c) => (
<button
key={c}
className={`chip capitalize preset-outlined-surface-400-600 ${color === c ? 'preset-tonal-primary' : ''}`}
onClick={() => setColor(c)}
>
{color === c && <CheckIcon size={14} />}
<span>{c}</span>
</button>
))}
{/* --- */}
</div>
</div>
);
}Favorite Color
<script lang="ts">
import CheckIcon from '@lucide/svelte/icons/check';
const colors = ['red', 'green', 'blue'];
let color = $state(colors[0]);
function setColor(selectedColor: string) {
color = selectedColor;
}
</script>
<div class="card preset-filled-surface-100-900 w-full max-w-md p-4">
<div class="flex justify-center items-center gap-2">
<span class="text-sm opacity-60">Favorite Color</span>
<!-- --- -->
{#each colors as c (c)}
<button
class={`chip capitalize preset-outlined-surface-400-600 ${color === c ? 'preset-tonal-primary' : ''}`}
onclick={() => setColor(c)}
>
{#if color === c}<CheckIcon size={14} />{/if}
<span>{c}</span>
</button>
{/each}
<!-- --- -->
</div>
</div>Input Chips
Represent user input values such as contacts or search terms.
To
import { XIcon } from 'lucide-react';
export default function Input() {
return (
<div className="card preset-filled-surface-100-900 w-full max-w-md p-4">
<div className="flex justify-center items-center gap-2">
<span className="text-sm opacity-60">To</span>
{/* --- */}
<button className="chip preset-outlined-surface-400-600">
<span>jane@email.com</span>
<XIcon size={14} />
</button>
<button className="chip preset-outlined-surface-400-600">
<span>dave@email.com</span>
<XIcon size={14} />
</button>
{/* --- */}
</div>
</div>
);
}To
<script lang="ts">
import XIcon from '@lucide/svelte/icons/x';
</script>
<div class="card preset-filled-surface-100-900 w-full max-w-md p-4">
<div class="flex justify-center items-center gap-2">
<span class="text-sm opacity-60">To</span>
<!-- --- -->
<button class="chip preset-outlined-surface-400-600">
<span>jane@email.com</span>
<XIcon size={14} />
</button>
<button class="chip preset-outlined-surface-400-600">
<span>dave@email.com</span>
<XIcon size={14} />
</button>
<!-- --- -->
</div>
</div>Suggestion Chips
Represent a canned set of suggested options for a user to choose from.
Rating
export default function Suggestion() {
return (
<div className="card preset-filled-surface-100-900 w-full max-w-md p-4">
<div className="flex justify-center items-center gap-2">
<span className="text-sm opacity-60">Rating</span>
{/* --- */}
<button className="chip preset-outlined-surface-400-600">
<span>Bad</span>
</button>
<button className="chip preset-outlined-surface-400-600">
<span>Good</span>
</button>
<button className="chip preset-outlined-surface-400-600">
<span>Awesome</span>
</button>
{/* --- */}
</div>
</div>
);
}Rating
<div class="card preset-filled-surface-100-900 w-full max-w-md p-4">
<div class="flex justify-center items-center gap-2">
<span class="text-sm opacity-60">Rating</span>
<!-- --- -->
<button class="chip preset-outlined-surface-400-600">
<span>Bad</span>
</button>
<button class="chip preset-outlined-surface-400-600">
<span>Good</span>
</button>
<button class="chip preset-outlined-surface-400-600">
<span>Awesome</span>
</button>
<!-- --- -->
</div>
</div>Disabled
When applied to a <button> element, you can use the disabled attribute.
<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal" disabled>Chip</button>Presets
Provides full support of Presets .
<div class="space-y-4">
<div class="flex gap-4">
<button type="button" class="chip preset-filled-primary-500">Chip</button>
<button type="button" class="chip preset-tonal-primary">Chip</button>
<button type="button" class="chip preset-outlined-primary-500">Chip</button>
</div>
<div class="flex gap-4">
<button type="button" class="chip preset-filled-secondary-500">Chip</button>
<button type="button" class="chip preset-tonal-secondary">Chip</button>
<button type="button" class="chip preset-outlined-secondary-500">Chip</button>
</div>
<div class="flex gap-4">
<button type="button" class="chip preset-filled-tertiary-500">Chip</button>
<button type="button" class="chip preset-tonal-tertiary">Chip</button>
<button type="button" class="chip preset-outlined-tertiary-500">Chip</button>
</div>
<div class="flex gap-4">
<button type="button" class="chip preset-filled-success-500">Chip</button>
<button type="button" class="chip preset-tonal-success">Chip</button>
<button type="button" class="chip preset-outlined-success-500">Chip</button>
</div>
<div class="flex gap-4">
<button type="button" class="chip preset-filled-warning-500">Chip</button>
<button type="button" class="chip preset-tonal-warning">Chip</button>
<button type="button" class="chip preset-outlined-warning-500">Chip</button>
</div>
<div class="flex gap-4">
<button type="button" class="chip preset-filled-error-500">Chip</button>
<button type="button" class="chip preset-tonal-error">Chip</button>
<button type="button" class="chip preset-outlined-error-500">Chip</button>
</div>
<div class="flex gap-4">
<button type="button" class="chip preset-filled-surface-500">Chip</button>
<button type="button" class="chip preset-tonal-surface">Chip</button>
<button type="button" class="chip preset-outlined-surface-500">Chip</button>
</div>
</div>