Skip to main contentSkip to sidebarSkip to headerSkip to footer

Toggle

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

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Toggle } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<Toggle variant="outline" size="regular">
  Toggle
</Toggle>
 
{/* Different variants */}
<Toggle variant="transparent">Transparent</Toggle>
<Toggle variant="outline">Outline</Toggle>
 
{/* Different sizes */}
<Toggle variant="outline" size="medium">Medium</Toggle>
<Toggle variant="outline" size="large">Large</Toggle>
 
{/* Pressed state */}
<Toggle variant="outline" defaultPressed>
  Pressed
</Toggle>
 
{/* Disabled state */}
<Toggle variant="outline" disabled>
  Disabled
</Toggle>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗