Toggle

Core Idea

A two-state (on/off) button, built on Base UI Toggle. Use for a single standalone pressed/unpressed control (e.g. bookmark, bold), not for grouped mutually-related options (use Toggle Group for that).

Key Concepts

• variant: "outline" gives a bordered style; default is unstyled/ghost-like.
• size: "sm", "default", "lg".
• aria-label: required for icon-only toggles to remain accessible.
• group-aria-pressed/toggle: utility class hook to style children (e.g. fill an icon) based on pressed state.
• disabled: standard disabled prop.

Code Examples

import { BookmarkIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"

<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
  <BookmarkIcon className="group-aria-pressed/toggle:fill-foreground" />
  Bookmark
</Toggle>

• O que demonstra: Ícone que muda de preenchimento com base no estado pressionado via classe utilitária de grupo.

Reference Tables

Prop	Values
variant	default, outline
size	sm, default, lg

Key Takeaways

1. Sempre defina aria-label quando o Toggle for só ícone.
2. Use group-aria-pressed/toggle: para estilizar filhos conforme o estado pressionado, sem gerenciar estado manualmente.
3. Para vários toggles relacionados (formatação de texto, filtros exclusivos/múltiplos), prefira ToggleGroup.
4. Instalação manual requer @base-ui/react.

Connects To

• Toggle Group: agrupa múltiplos Toggle com seleção única ou múltipla.
• Button Group: para agrupar botões sem estado pressionado.