iconiq
—Open GitHub

Button Group

Segmented button rows and compact icon actions with a smoother shared motion treatment.

Open in

Installation

npx shadcn@latest add @iconiq/button-group

Props

Button

2 props

Standalone motion button with a light upward entrance, hover scale, and a small label nudge inside the content span.
childrenReactNode
Required
Button content rendered inside an animated inline span so the label can shift slightly on hover.
classNamestring
Merged onto the root button. Use it for local width, spacing, or surface overrides.

Notes

Most standard button props such as type, disabled, onClick, name, value, aria-*, and data-* are forwarded to the underlying motion button.
The public prop surface intentionally leaves out the native drag and CSS animation callback props because they conflict with Motion's own handler names.

IconButton

2 props

Compact icon-only version of the same button surface, with a stronger hover scale and a rotating inner icon span.
childrenReactNode
Required
Icon content rendered inside the motion span. SVG children inherit the built-in 1rem sizing utility.
classNamestring
Merged onto the icon button root for size or surface overrides.

ButtonGroup

2 props

Simple flex wrapper for arranging several button surfaces in one row with shared staggered entrance motion.
childrenReactNode
Required
Buttons, icon buttons, or any other inline controls you want to keep in the same row.
classNamestring
Merged onto the outer motion div. The base layout already applies a horizontal flex row with a small gap.

ButtonGroupItems

2 props

Segmented button shell that turns each valid child element into an internal motion button with shared borders and equal visual rhythm.
childrenReactNode
Required
Pass plain button-like elements as children. Their props and children are hoisted into the internal motion buttons rendered by the group.
classNamestring
Merged onto the outer segmented wrapper for width or surface overrides.

Notes

Only valid React elements are rendered. Non-element children are ignored.
The child node itself is not preserved; ButtonGroupItems reads each child's props and children, then renders a fresh motion button for that slot.

SegmentedControl

5 props

String-based segmented selector with internal state support, hover wash, and a spring-driven selected indicator.
optionsstring[]
Required
Ordered list of visible segments. The first option becomes the uncontrolled initial selection when value is not provided.
valuestring
Controlled selected option. When provided, the internal state syncs to this prop through an effect.
onChange(value: string) => void
Called with the selected option whenever a segment is pressed.
classNamestring
Merged onto the segmented wrapper for width, alignment, or spacing overrides.
layoutIdstring
Default"segmented-indicator"
Motion layout id used by the selected indicator. Override it when you render multiple segmented controls on the same page and want isolated indicator motion.