nessra uinessra ui

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

Loading...
import { Bold } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/toggle.json

Usage

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

Examples

Outline

Loading...
import { Italic } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

With Text

Loading...
import { Italic } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Disabled

Loading...
import { Underline } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

API Reference

Toggle Props

PropTypeDefaultDescription
variant"default" | "outline""default"The toggle variant
size"default" | "sm" | "lg""default"The toggle size
pressedboolean-Controlled pressed state
defaultPressedbooleanfalseDefault pressed state
onPressedChange(pressed: boolean) => void-Callback when pressed changes
disabledbooleanfalseDisable the toggle