🎚️ 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

PropTypeDefaultDescription
checkedbooleanfalseΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠΎΠ²Π°Π½ΠΈΠΉ стан toggle
onChange(checked: boolean) => void-Callback ΠΏΡ€ΠΈ Π·ΠΌΡ–Π½Ρ– стану
variantdefault | brutal | neon | gradientdefaultΠ’Π°Ρ€Ρ–Π°Π½Ρ‚ ΡΡ‚ΠΈΠ»ΡŽ
sizesm | md | lgmdΠ ΠΎΠ·ΠΌΡ–Ρ€ toggle
labelstring-ВСкст Π»Π΅ΠΉΠ±Π»Π°
icon{ on: string; off: string }-Π†ΠΊΠΎΠ½ΠΊΠΈ для on/off станів
disabledbooleanfalseΠ’ΠΈΠΌΠΊΠ½Π΅Π½ΠΈΠΉ стан