Button

Use Button

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Inline gap="2">
        <Button>Save changes</Button>
        <Button variant="subtle">Cancel</Button>
        <Button loading>Saving</Button>
      </Inline>
    </FloodRoot>
  );
}

Design notes

• Button defaults to type="button". Set submit or reset deliberately inside forms.
• Loading disables activation and sets aria-busy. The host owns completion announcements.
• Prefer subtle for standalone secondary actions; ghost belongs in a clear parent context.
• Buttons use content width, including inside Stack. Opt into a full-width action with style={{ inlineSize: "100%" }} only when the composition calls for it.

API reference