Actions

Toggle and ToggleGroup

Buttons that stay pressed: text styles, view switches, filters.

import { Toggle, ToggleGroup, ToggleGroupItem } from "@flinbu/seed";

Toggle

import { Toggle } from "@flinbu/seed";
import { Bold, Italic } from "lucide-react";

<Toggle aria-label="Bold" icon={<Bold />} />
<Toggle defaultPressed leftIcon={<Italic />}>Italic</Toggle>

Groups

import { ToggleGroup, ToggleGroupItem } from "@flinbu/seed";
import { Bold, Italic, Underline, LayoutGrid, List } from "lucide-react";

<ToggleGroup type="single" variant="outline" defaultValue="grid" allowEmpty={false} aria-label="View">
  <ToggleGroupItem value="grid" icon={<LayoutGrid />} aria-label="Grid" />
  <ToggleGroupItem value="list" icon={<List />} aria-label="List" />
</ToggleGroup>
<ToggleGroup type="multiple" aria-label="Text style" defaultValue={["bold"]}>
  <ToggleGroupItem value="bold" icon={<Bold />} aria-label="Bold" />
  <ToggleGroupItem value="italic" icon={<Italic />} aria-label="Italic" />
  <ToggleGroupItem value="underline" icon={<Underline />} aria-label="Underline" />
</ToggleGroup>
<ToggleGroup type="single" variant="outline" size="sm" defaultValue="light" aria-label="Theme">
  <ToggleGroupItem value="light">Light</ToggleGroupItem>
  <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
  <ToggleGroupItem value="system">System</ToggleGroupItem>
</ToggleGroup>

Use it for

ToggleGroup type="single" for one of a few views; type="multiple" for independent options.

Use something else for

Navigation between pages: use Tabs or links.

Props

Prop	Type	Default	Description
`pressed / defaultPressed`	`boolean`	`none`	Toggle state.
`onPressedChange`	`(pressed: boolean) => void`	`none`	Called on change.
`icon`	`IconProp`	`none`	Icon-only toggle. An element like <Search /> (works in server components) or, in client components, the component itself.
`leftIcon`	`IconProp`	`none`	Icon before the label. An element like <Search /> (works in server components) or, in client components, the component itself.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	sm, md or lg.
`ToggleGroup: type`	`'single' \| 'multiple'`	`none`	One or many pressed.
`ToggleGroup: allowEmpty`	`boolean`	`true`	Single groups: false keeps one selected.
`ToggleGroup: variant`	`'ghost' \| 'outline'`	`'ghost'`	outline frames the group as a segmented control.

Accessibility

Built on Radix Toggle and ToggleGroup: aria-pressed, or radio semantics in single groups; arrow keys move inside a group.
Icon-only toggles need aria-label.