ποΈ Toggle Component
Brutal toggle switches Π· ΡΡΠ·Π½ΠΈΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ, ΡΠΎΠ·ΠΌΡΡΠ°ΠΌΠΈ ΡΠ° ΡΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ.
ΠΠ°ΡΡΠ°Π½ΡΠΈ ΡΡΠΈΠ»ΡΠ²
Default
Brutal
Neon
Gradient
Π ΠΎΠ·ΠΌΡΡΠΈ
Small
Medium
Large
Π ΡΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
Check
Theme
Sound
Disabled
Disabled On
Disabled Off
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π° Π³ΡΡΠΏΠ°
Option 1
Option 2
Option 3
Usage Example
import { Toggle, ToggleGroup } from '@brutal-ui/react';
function MyComponent() {
const [checked, setChecked] = useState(false);
return (
<ToggleGroup>
<Toggle
checked={checked}
onChange={setChecked}
variant="brutal"
size="lg"
label="Enable Feature"
icon={{ on: 'β', off: 'β' }}
/>
</ToggleGroup>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | ΠΠΎΠ½ΡΡΠΎΠ»ΡΠΎΠ²Π°Π½ΠΈΠΉ ΡΡΠ°Π½ toggle |
| onChange | (checked: boolean) => void | - | Callback ΠΏΡΠΈ Π·ΠΌΡΠ½Ρ ΡΡΠ°Π½Ρ |
| variant | default | brutal | neon | gradient | default | ΠΠ°ΡΡΠ°Π½Ρ ΡΡΠΈΠ»Ρ |
| size | sm | md | lg | md | Π ΠΎΠ·ΠΌΡΡ toggle |
| label | string | - | Π’Π΅ΠΊΡΡ Π»Π΅ΠΉΠ±Π»Π° |
| icon | { on: string; off: string } | - | ΠΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ on/off ΡΡΠ°Π½ΡΠ² |
| disabled | boolean | false | ΠΠΈΠΌΠΊΠ½Π΅Π½ΠΈΠΉ ΡΡΠ°Π½ |