Everyday

Playground

Toggle

ui
control

Pressable toggle for single or grouped selection states

Toolbar buttons, view mode switchers, filter toggles

import { Toggle } from "@everydayos/ui";

Usage

Standalone toggle button

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

API

variant
Default: default
defaultoutline
defaultpreferredrare
size
Default: default
defaultsmlg
defaultpreferredrare
PropTypeDefault
classNameunknown—

Examples

Toggle Variants

Default and outline variants

<Inline spacing="sm">
  <Toggle variant="default">Default</Toggle>
  <Toggle variant="outline">Outline</Toggle>
</Inline>

Composition

Pairs well with

ToggleGroup
Stack
Inline

When to avoid

  • Need dropdown — use Select instead
  • Single on/off — use Switch instead