Inline

Use Inline

Inline 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" align="center">
        <Button>Save changes</Button>
        <Button variant="subtle">Cancel</Button>
      </Inline>
    </FloodRoot>
  );
}

Design notes

• Inline wraps when its children need more space.
• Use the same control size for neighboring actions of the same level.
• Rows center items by default. Use gap="4" between independent choices; gap="2" remains available for tightly related content.

API reference