ViewToggle
The list ⇄ grid icon switch from Attio.
Attio's compact view switch: a padded 28px track (~5% ink, radius 10) holding 24px icon tiles (radius 8). The selected tile is raised with a soft shadow. Use it for view-mode switches (list ⇄ grid) or any small mutually-exclusive icon choice. Controlled via value + onChange.
Preview
grid view
Usage
import { ViewToggle } from "crisp";
<ViewToggle
value={view}
onChange={setView}
options={[
{ value: "list", icon: <List size={16} />, label: "List" },
{ value: "grid", icon: <LayoutGrid size={16} />, label: "Grid" },
]}
/>;API
| Prop | Type | Description |
|---|---|---|
options | { value, icon, label }[] | The tiles (label is the accessible name). |
value | string | The selected value. |
onChange | (value: string) => void | Fired when a tile is chosen. |