Reddot UI Library

Docs
Toggle

Toggle

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

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/toggle.json

Utilisation

import { Toggle } from "@/components/ui/toggle"
 
<Toggle>Toggle</Toggle>

Exemples

Par défaut

import { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}

Outline

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  )
}

Avec texte

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleWithText() {
  return (
    <Toggle aria-label="Toggle italic">
      <Italic className="h-4 w-4 mr-2" />
      Italique
    </Toggle>
  )
}

Avec état

"use client"
 
import { useState } from "react"
import { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleWithState() {
  const [isPressed, setIsPressed] = useState(false)
 
  return (
    <div className="space-y-2">
      <Toggle 
        pressed={isPressed} 
        onPressedChange={setIsPressed}
        aria-label="Toggle bold"
      >
        <Bold className="h-4 w-4" />
      </Toggle>
      <p className="text-sm text-muted-foreground">
        État : {isPressed ? "Activé" : "Désactivé"}
      </p>
    </div>
  )
}

Tailles

Small

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleSm() {
  return (
    <Toggle size="sm" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  )
}

Large

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleLg() {
  return (
    <Toggle size="lg" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  )
}

Désactivé

import { Underline } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleDisabled() {
  return (
    <Toggle disabled aria-label="Toggle underline">
      <Underline className="h-4 w-4" />
    </Toggle>
  )
}

Variantes

Default

<Toggle variant="default">
  Default
</Toggle>

Outline

<Toggle variant="outline">
  Outline
</Toggle>

API Reference

Toggle

Un bouton à deux états qui peut être activé ou désactivé.

PropTypeDefaultDescription
pressedboolean-L'état pressé contrôlé du toggle.
defaultPressedbooleanfalseL'état pressé par défaut du toggle.
onPressedChange(pressed: boolean) => void-Gestionnaire d'événement appelé lorsque l'état pressé change.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec le toggle.
variant"default" | "outline""default"La variante du toggle.
size"default" | "sm" | "lg""default"La taille du toggle.

Conseils d'utilisation

Accessibilité

  • Toujours fournir un aria-label ou un aria-labelledby
  • Utiliser des icônes reconnaissables pour les actions
  • Maintenir un contraste de couleur suffisant

Quand utiliser Toggle vs Switch

  • Toggle : Pour des actions ou états temporaires (formatage de texte, filtres)
  • Switch : Pour des paramètres persistants (notifications, mode sombre)

Bonnes pratiques

  1. État visuel clair : L'état du toggle doit être évident
  2. Feedback immédiat : Répondre immédiatement aux interactions
  3. Groupement logique : Utiliser Toggle Group pour les options liées
  4. Consistance : Maintenir un style cohérent dans l'application

Références