UILab

Toggle

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

"use client"

import { Toggle } from "uilab-core"
import { BookmarkIcon } from "lucide-react"

Usage

import { Toggle } from "uilab-core"
<Toggle>Toggle</Toggle>

Examples

Outline

Use variant="outline" for an outline style.

"use client"

import { Toggle } from "uilab-core"
import { BoldIcon, ItalicIcon } from "lucide-react"

Sizes

Use the size prop to change the size of the toggle.

"use client"

import { Toggle } from "uilab-core"

export function ToggleSizesExample() {

Text

"use client"

import { Toggle } from "uilab-core"
import { ItalicIcon } from "lucide-react"

Disabled

"use client"

import { Toggle } from "uilab-core"

export function ToggleDisabledExample() {

On this page