# Chips

Use chips to enter information, make selections, filter content, or trigger actions.

```astro
---
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.

```tsx
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>
	);
}

```

## Filter Chips

Represent a canned selection of options to choose from.

```tsx
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>
	);
}

```

## Input Chips

Represent user input values such as contacts or search terms.

```tsx
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>
	);
}

```

## Suggestion Chips

Represent a canned set of suggested options for a user to choose from.

```tsx
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>
	);
}

```

## Disabled

When applied to a `<button>` element, you can use the `disabled` attribute.

```astro
<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal" disabled>Chip</button>

```

## Presets

Provides full support of [Presets](/docs/\[framework]/tailwind-utilities/presets).

```astro
<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>

```