Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

Examples

Multiple

Props

Docs API Reference

Animate UI props

ToggleGroup

Prop	Type	Default
`type`	`0`	-
`transition?`	`Transition`	`{ type: 'spring', bounce: 0, stiffness: 200, damping: 25 }`
`activeClassName?`	`string`	-
`variant?`	`0`	`default`
`size?`	`0`	`default`

ToggleGroupItem

Prop	Type	Default
`children`	`React.ReactNode`	-
`buttonProps?`	`HTMLMotionProps<"button">`	-
`spanProps?`	`React.HTMLAttributes<HTMLSpanElement>`	-
`variant?`	`0`	`default`
`size?`	`0`	`default`

Credits

We use Radix UI for the toggle group component.
We take our inspiration from Shadcn UI for the toggle group style.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.