ButtonGroup

Use ButtonGroup

ButtonGroup is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, ButtonGroup, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ButtonGroup label="Editing actions">
        <Button variant="subtle">Undo</Button>
        <Button variant="subtle">Redo</Button>
      </ButtonGroup>
    </FloodRoot>
  );
}

Design notes

• Use direct Button/IconButton children with compatible sizes. The group owns connected radii and single separators; actions keep their props and handlers.
• label names the group. Tab follows normal button order; this is not a toolbar, menu or selection group.
• Horizontal is default; vertical stacks actions. Content can wrap within a button. Conditional/hidden actions preserve the visible end corners. No clipping masks focus.

API reference