ACTIONS · COMPONENT
Button group
Related choices, held together in one compact control.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { ButtonGroup, ButtonGroupItem } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [view, setView] = useState("Week");
return <div style={{ width: "min(100%, 440px)", display: "grid", gap: 28 }}><h2 style={{ fontSize: 24 }}>Choose your perspective.</h2><ButtonGroup>{["Day", "Week", "Month"].map(label => <ButtonGroupItem key={label} active={view === label} disabled={state === "disabled"} onClick={() => setView(label)}>{label}</ButtonGroupItem>)}</ButtonGroup><p role="status">{view} view selected for this demo schedule.</p></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A group of three buttons controls a local schedule view. The selected button exposes its pressed state and the content summary reflects that choice.
Try it
Switch between Day, Week and Month. Compare the disabled state.