mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
73355ab6c1
* wip * improve structure * mc * wip * wip * wip * separate card * wip * wip * mc * mc * improve styling * mc * mc * mc * mc * Enhance CategoryCard styling with improved link positioning and pointer events * add transitions * mc * mc
95 lines
1.7 KiB
Plaintext
95 lines
1.7 KiB
Plaintext
---
|
|
title: Toggle
|
|
description: A two-state button that can be toggled on or off.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/toggle#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-toggle-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/toggle
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="toggle" title="components/ui/toggle.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Toggle } from "@/components/ui/toggle"
|
|
```
|
|
|
|
```tsx
|
|
<Toggle>Toggle</Toggle>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Toggle
|
|
|
|
Styled wrapper for `Toggle.Root` from Base UI with variant and size options.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --------- | ----------------------------- | ----------- | ------------------------------------------------ |
|
|
| `variant` | `"default" \| "outline"` | `"default"` | Controls the toggle styling |
|
|
| `size` | `"default" \| "sm" \| "lg"` | `"default"` | Controls the toggle size |
|
|
|
|
## Examples
|
|
|
|
### Outline
|
|
|
|
<ComponentPreview name="p-toggle-2" />
|
|
|
|
### With Icon
|
|
|
|
<ComponentPreview name="p-toggle-3" />
|
|
|
|
### Small Size
|
|
|
|
<ComponentPreview name="p-toggle-4" />
|
|
|
|
### Large Size
|
|
|
|
<ComponentPreview name="p-toggle-5" />
|
|
|
|
### Disabled
|
|
|
|
<ComponentPreview name="p-toggle-6" />
|
|
|
|
### Icon Group
|
|
|
|
<ComponentPreview name="p-toggle-7" />
|