Getting Started

Installation

Fundamentals

Components

Animations

FadeComing Soon
Infinite ScrollComing Soon
PointerComing Soon

components

Toggle

A button that toggles between two states, such as on/off or show/hide.

Source Code Radix UI

Installation


pnpm dlx radianui@latest add toggle

Usage

Imports

/components/ui/toggle.tsx

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

Code

/components/ui/toggle.tsx

<Toggle>Toggle</Toggle>

Examples

Variants

Sizes

Favorite

Notifications

With Heart

Disabled

Props

<Toggle>

Name	Default	Values
variant	outline	ghostoutline
size	32	283236404448
pressed	undefined	boolean
defaultPressed	false	boolean
onPressedChange	-	(pressed: boolean) => void
disabled	false	boolean
asChild	false	boolean
External Reference	-	-