uix-uiButton group
Attached segmented actions. 3 variants × 3 sizes.
import * as React from "react";
import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group";
export default function Example() {
const [size, setSize] = React.useState("250g");
return (
<ButtonGroup aria-label="Tin size">
{["100g", "250g", "500g"].map(s => <ButtonGroupItem key={s} pressed={size === s} onClick={() => setSize(s)}>{s}</ButtonGroupItem>)}
</ButtonGroup>
);
}
Installation
$ npx uix-ui@latest add button-groupThis copies the file into components/ui/button-group.tsx in your project. npx shadcn@latest add @uix/button-group works too.
Usage
import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group";
<ButtonGroup aria-label="Tin size">
{["100g", "250g", "500g"].map(s => <ButtonGroupItem key={s} pressed={size === s} onClick={() => setSize(s)}>{s}</ButtonGroupItem>)}
</ButtonGroup>
Props
Button group props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | outline | primary | ghost | "outline" | |
size | sm | md | lg | "md" |
ButtonGroupItemProps
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | – | Marks the segment as the active one. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts
This file exports 2 parts: ButtonGroup, ButtonGroupItem. Use only the ones you need.