Reshaped Toggle button group

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.

by reshaped

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>
          <ToggleButton value="1">Button 1</ToggleButton>
          <ToggleButton value="2">Button 2</ToggleButton>
          <ToggleButton value="3">Button 3</ToggleButton>
        </ToggleButtonGroup>
      </div>
    </Reshaped>
  );
}