Button Group

iconiq-ui/button-group

FreeComponent

Grouped action buttons, text segments, separators, segmented button rows, and a selectable segmented control with spring-driven hover and active motion.

Live preview

live · rendered by the registry

Rendered by Iconiq UI on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.iconiqui.com/r/button-group.json

Source

button-group.tsxwww.iconiqui.com/r/button-group.json · first 6 KB

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import { LayoutGroup, motion } from "motion/react";
7import * as React from "react";
8 
9import { cn } from "@/lib/utils";
10 
11const componentThemeClassName =
12// … truncated

What it pulls in

npm packages

@base-ui/react
motion
class-variance-authority

Files it writes

button-group.tsx

More from Iconiq UI

All 119 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	Iconiq UI	Components	Free	2 deps
AI Inputai-input	Iconiq UI	Components	Free	3 deps
Alertalert	Iconiq UI	Components	Free	2 deps
Avataravatar	Iconiq UI	Components	Free	3 deps
Accordion (Base UI)b-accordion	Iconiq UI	Components	Free	2 deps
Alert Dialog (Base UI)b-alert-dialog	Iconiq UI	Components	Free	3 deps
Autocomplete (Base UI)b-autocomplete	Iconiq UI	Components	Free	3 deps
Avatar (Base UI)b-avatar	Iconiq UI	Components	Free	2 deps