ToggleButtonGroup

import { ToggleButtonGroup } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
value	string	yes	Currently selected value
onValueChange	(value: string) => void	yes	Callback when value changes
options	{ value: string; label: string; icon?: React.ReactNode; disabled?: boolean }[]	yes	Options to display
className	string	—
aria-label	string	—	Names the group: what it chooses between, e.g. “View mode”.
aria-labelledby	string	—	The id of a visible label that names the group.
fullWidth	boolean	—	Stretch the track to its container and split it evenly between the options.

Example

This is the example the design-system sync renders and verifies for this component.

import { ToggleButtonGroup } from "@rebasepro/ui";

// Contract fixed by the orchestrator (generics dropped by the .d.ts
// extractor): { value, onValueChange, options: { value, label, icon?,
// disabled? }[], className? }.
export const Basic = () => (
    <div className="p-4">
        <ToggleButtonGroup
            value="list"
            onValueChange={() => {}}
            options={[
                { value: "list", label: "List" },
                { value: "grid", label: "Grid" },
                { value: "kanban", label: "Kanban" }
            ]}
        />
    </div>
);