Toggle

Component

Toggle

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

Installation

Install the following dependencies

npm i @radix-ui/react-toggle

Copy and paste the following code into your project

components/ui/toggle/index.tsx

'use client'
 
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { styled } from '@shadow-panda/styled-system/jsx'
import { toggle } from '@shadow-panda/styled-system/recipes'
 
export const Toggle = styled(TogglePrimitive.Root, toggle)

Update the import paths to match your project setup

Usage

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

<Toggle>Toggle</Toggle>

Installation

Install the following dependencies

Copy and paste the following code into your project

Update the import paths to match your project setup

Usage

Examples

Default

Outline

With Text

Small

Large

Disabled