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	—

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>
);