ViewToggle

A 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.

Its measured chrome is fixed, but the options are generic — reach for it directly wherever you need a small icon toggle, not only list ⇄ grid.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { ViewToggle } from "@crisp-ui-kit/crisp";

<ViewToggle
  value={view}
  onChange={setView}
  options={[
    { value: "list", icon: <List size={16} />, label: "List" },
    { value: "grid", icon: <LayoutGrid size={16} />, label: "Grid" },
  ]}
/>;

Props