OverflowActions

Use OverflowActions

A priority-based action row that moves commands into a More menu when space is limited.

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <OverflowActions label="Document actions" shape="pill" items={[{id:"save",label:"Save",priority:10},{id:"duplicate",label:"Duplicate"},{id:"archive",label:"Archive"}]} />
    </FloodRoot>
  );
}

Design notes

• Compose commands rather than links. Higher priority remains visible longer; source order is preserved.
• Uses existing Toolbar, Button, IconSlot and Menu; hidden measurements are inert and excluded from the accessibility tree.
• shape defaults to pill; rounded restores the field-radius Toolbar shell. Available width excludes Toolbar padding.
• containerVariant="plain" delegates a surface-free rail to Toolbar, keeping peer control heights aligned; contained is the default. variant still styles the actions themselves.

API reference