Components
Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and full keyboard navigation.
npx @21st-dev/cli add reshaped/reshaped-toggle-button-groupLoading preview...
import { Reshaped } from "reshaped/bundle";
import ToggleButtonGroup, { ToggleButton } from "@/components/ui/reshaped-toggle-button-group";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<ToggleButtonGroup defaultValue={["1"]}>
<ToggleButton value="1">Button 1</ToggleButton>
<ToggleButton value="2" disabled>
Button 2
</ToggleButton>
<ToggleButton value="3">Button 3</ToggleButton>
</ToggleButtonGroup>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...