---import { Check } from 'lucide-react';---
<div class="flex items-center gap-4"> <button type="button" class="chip-icon preset-filled"> <Check size={16} /> </button> <button type="button" class="chip preset-filled">Chip</button> <button type="button" class="chip preset-filled"> <span>Chip</span> <Check size={16} /> </button></div>
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>
Disabled
<button type="button" class="chip preset-filled" disabled>Chip</button>
Selection
import React, { useState } from 'react';
export const Page: React.FC = () => { // The default color state const [color, setColor] = useState('red'); // The available set of colors const colors = ['red', 'blue', 'green'];
return ( <div className="flex gap-2"> {/* Loop through the available colors */} {color && colors.map((c) => ( // On selection, set the color state, dynamically update classes <button className={`chip capitalize ${color === c ? 'preset-filled' : 'preset-tonal'}`} onClick={() => setColor(c)} key={c}> <span>{c}</span> </button> ))} </div> );};