Button Group
Related actions arranged as one control.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Button Group
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/button-group.json'Usage
A complete example using the installed component and hook paths.
Button Group usage
"use client";type PreviewProps = { interactive?: boolean };import { useState } from "react";import { Button } from "@/components/ui/button";import { ButtonGroup } from "@/components/ui/button-group";function ButtonGroupPreview({ interactive }: PreviewProps) { const [view, setView] = useState("Day"); return ( <div className="space-y-2"> <ButtonGroup> {["Day", "Week", "Month"].map((option) => ( <Button key={option} variant={view === option ? "default" : "outline"} onClick={() => interactive && setView(option)} > {option} </Button> ))} </ButtonGroup> {interactive && <output className="block text-xs text-muted-foreground">View: {view}</output>} </div> );}export default function Demo() { return <ButtonGroupPreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
ButtonGroup
ButtonGroup props
React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>ButtonGroupSeparator
ButtonGroupSeparator props
React.ComponentProps<typeof Separator>- orientation
- "vertical"
ButtonGroupText
ButtonGroupText props
useRender.ComponentProps<"div">buttonGroupVariants
Exported value.