Blode UI
GitHub

Toggle

PreviousNext

A two-state button that can be either on or off.

Loading
Loading...
import { BookmarkFilledIcon, BookmarkIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleDemo = () => (
  <Toggle
    aria-label="Toggle bookmark"
    render={(props, state) => (
      <button type="button" {...props}>
        {state.pressed ? <BookmarkFilledIcon /> : <BookmarkIcon />}
        Bookmark
      </button>
    )}
    size="sm"
    variant="outline"
  />
);

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/toggle"

Usage

import { Toggle } from "@/components/ui/toggle";
<Toggle>Toggle</Toggle>

Examples

Default

Loading
Loading...
import { BookmarkFilledIcon, BookmarkIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleDemo = () => (
  <Toggle
    aria-label="Toggle bookmark"
    render={(props, state) => (
      <button type="button" {...props}>
        {state.pressed ? <BookmarkFilledIcon /> : <BookmarkIcon />}
        Bookmark
      </button>
    )}
    size="sm"
    variant="outline"
  />
);

Outline

Loading
Loading...
import { BoldIcon, ItalicIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleOutline = () => (
  <div className="flex flex-wrap items-center gap-2">
    <Toggle aria-label="Toggle italic" variant="outline">
      <ItalicIcon />
      Italic
    </Toggle>
    <Toggle aria-label="Toggle bold" variant="outline">
      <BoldIcon />
      Bold
    </Toggle>
  </div>
);

With Text

Loading
Loading...
import { ItalicIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleText = () => (
  <Toggle aria-label="Toggle italic">
    <ItalicIcon />
    Italic
  </Toggle>
);

Small

Loading
Loading...
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleSizes = () => (
  <div className="flex flex-wrap items-center gap-2">
    <Toggle aria-label="Toggle small" size="sm" variant="outline">
      Small
    </Toggle>
    <Toggle aria-label="Toggle default" size="default" variant="outline">
      Default
    </Toggle>
    <Toggle aria-label="Toggle large" size="lg" variant="outline">
      Large
    </Toggle>
  </div>
);

Large

Loading
Loading...
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleSizes = () => (
  <div className="flex flex-wrap items-center gap-2">
    <Toggle aria-label="Toggle small" size="sm" variant="outline">
      Small
    </Toggle>
    <Toggle aria-label="Toggle default" size="default" variant="outline">
      Default
    </Toggle>
    <Toggle aria-label="Toggle large" size="lg" variant="outline">
      Large
    </Toggle>
  </div>
);

Disabled

Loading
Loading...
import { Toggle } from "@/components/ui/toggle";
 
export const ToggleDisabled = () => (
  <div className="flex flex-wrap items-center gap-2">
    <Toggle aria-label="Toggle disabled" disabled>
      Disabled
    </Toggle>
    <Toggle aria-label="Toggle disabled outline" disabled variant="outline">
      Disabled
    </Toggle>
  </div>
);