Components
Loading preview...
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes. Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so React Aria implements it using ARIA attributes.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/toggleimport { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleDemo() {
return (
<Toggle aria-label="Toggle italic">
<Bold className="size-4" />
</Toggle>
)
}