Wensity

Toggle

A toggle button for toolbars, filters, and grouped controls.

toggletoggle grouptoolbarfilterformattingselectionbuttonprimitivedashboard
Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Standard pressable toggles for binary settings and actions.

examples/toggle-default.tsx
"use client";


import * as React from "react";
import { Toggle } from "@/components/wensity/toggle";


export function ToggleDefault() {
  const [pressed, setPressed] = React.useState(false);


  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      Notifications
    </Toggle>
  );
}

Icon

Compact icon-only toggles for editor and formatting toolbars.

examples/toggle-icon.tsx
"use client";


import * as React from "react";
import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/wensity/toggle";


export function ToggleIcon() {
  const [format, setFormat] = React.useState<string[]>(["bold"]);


  return (
    <ToggleGroup
      type="multiple"
      value={format}
      onValueChange={(next) => Array.isArray(next) && setFormat(next)}
      variant="icon"
      aria-label="Formatting toolbar"
    >
      <ToggleGroupItem value="bold" aria-label="Bold">
        <IconBold stroke={2.1} />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Italic">
        <IconItalic stroke={2.1} />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Underline">
        <IconUnderline stroke={2.1} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Outline

Bordered toggles for billing cycles, view modes, and segmented choices.

examples/toggle-outline.tsx
"use client";


import * as React from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/wensity/toggle";


export function ToggleOutline() {
  const [billing, setBilling] = React.useState("annual");


  return (
    <ToggleGroup
      type="single"
      value={billing}
      onValueChange={(next) => typeof next === "string" && setBilling(next)}
      variant="outline"
      aria-label="Billing cycle"
    >
      <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
      <ToggleGroupItem value="annual">Annual</ToggleGroupItem>
      <ToggleGroupItem value="custom">Custom</ToggleGroupItem>
    </ToggleGroup>
  );
}

Soft

Subtle filled toggles for quiet dashboards and secondary toolbars.

examples/toggle-soft.tsx
"use client";


import * as React from "react";
import { IconLayoutGrid, IconList } from "@tabler/icons-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/wensity/toggle";


export function ToggleSoft() {
  const [view, setView] = React.useState("list");


  return (
    <ToggleGroup
      type="single"
      value={view}
      onValueChange={(next) => typeof next === "string" && setView(next)}
      variant="soft"
      aria-label="View mode"
    >
      <ToggleGroupItem value="list">
        <IconList stroke={2} />
        List
      </ToggleGroupItem>
      <ToggleGroupItem value="grid">
        <IconLayoutGrid stroke={2} />
        Grid
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Group — single

One active option with a gliding segment indicator.

examples/toggle-group-single.tsx
"use client";


import * as React from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/wensity/toggle";


export function ToggleGroupSingle() {
  const [density, setDensity] = React.useState("comfortable");


  return (
    <ToggleGroup
      type="single"
      value={density}
      onValueChange={(next) => typeof next === "string" && setDensity(next)}
      aria-label="Table density"
    >
      <ToggleGroupItem value="compact">Compact</ToggleGroupItem>
      <ToggleGroupItem value="comfortable">Comfortable</ToggleGroupItem>
      <ToggleGroupItem value="spacious">Spacious</ToggleGroupItem>
    </ToggleGroup>
  );
}

Group — multiple

Independent toggles for filters and multi-select toolbars.

examples/toggle-group-multiple.tsx
"use client";


import * as React from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/wensity/toggle";


export function ToggleGroupMultiple() {
  const [filters, setFilters] = React.useState(["pro", "animated"]);


  return (
    <ToggleGroup
      type="multiple"
      value={filters}
      onValueChange={(next) => Array.isArray(next) && setFilters(next)}
      variant="outline"
      aria-label="Component filters"
    >
      <ToggleGroupItem value="free">Free</ToggleGroupItem>
      <ToggleGroupItem value="pro">Pro</ToggleGroupItem>
      <ToggleGroupItem value="animated">Animated</ToggleGroupItem>
      <ToggleGroupItem value="forms">Forms</ToggleGroupItem>
    </ToggleGroup>
  );
}

Disabled

Disabled toggles stay readable without accepting input.

examples/toggle-disabled.tsx
import { Toggle, ToggleGroup, ToggleGroupItem } from "@/components/wensity/toggle";


export function ToggleDisabled() {
  return (
    <ToggleGroup type="single" defaultValue="left" disabled variant="outline">
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  );
}