ActionStrip

The ActionStrip component shows a row of actions as buttons and moves the trailing ones that don’t fit its width into a menu.

Code

import {
  ActionStrip,
  ActionStripItem,
  FileIcon,
  TagIcon,
  UserRoundSearchIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:gap-4">
      <AccountActions />

      <div className="tw:w-72 tw:self-end">
        <AccountActions />
      </div>

      <div className="tw:w-40 tw:self-end">
        <AccountActions />
      </div>

      <div className="tw:max-w-full tw:resize-x tw:overflow-x-hidden tw:pb-4">
        <AccountActions />
      </div>
    </div>
  );
}

function AccountActions() {
  return (
    <ActionStrip
      aria-label="Account actions"
      className="tw:justify-end tw:gap-2"
    >
      <ActionStripItem variant="default">
        <UserRoundSearchIcon /> Create lead
      </ActionStripItem>

      <ActionStripItem variant="outline">
        <FileIcon /> Create note
      </ActionStripItem>

      <ActionStripItem variant="outline">
        <TagIcon /> Edit tags
      </ActionStripItem>
    </ActionStrip>
  );
}

Overflow

Items leave the row from the end, so put the most important action first. Once any item overflows, the menu button takes its place at the end of the row, and the items restore as soon as the strip is wide enough again.

The strip fits items into its own width, so a strip sized to its content never grows to take overflowed items back. In a flex row, let it fill the free space as it does by default, and align its items with tw:justify-end when the actions trail the row.

Composition

ActionStrip
└── ActionStripItem

Accessibility

• The ActionStrip component has the role attribute set to group. Use aria-label or aria-labelledby to label it.
• Overflowed items are removed from the tab order and the accessibility tree until they fit again; inside the menu they are reachable with the arrow keys.
• Give every item a visible text label. The same content becomes the menu item, so an icon-only item would have no name in the menu.

API

ActionStrip

A row of actions that moves the trailing items that don’t fit its width into a menu. Renders a <div> element with role="group" and accepts standard <div> props. Each direct child must be an ActionStripItem; other children are ignored.

Props

moreLabel

moreLabel?: string = "More actions"

Accessible name of the menu button that holds overflowed items.

ActionStripItem

One action in an ActionStrip. Renders a <button> element while it fits, and a menu item inside the strip’s menu once it doesn’t. Give it a visible text label, since the same content is used in both places.

Props

children

children?: React.ReactNode

The item’s label, optionally preceded by an icon.

disabled

disabled?: boolean

Whether the item ignores user interaction.

onClick

onClick?: (() => void)

Called when the item is activated, as a button or as a menu item.

variant

variant?: "outline" | "link" | "secondary" | "default" | "ghost" | "destructive" | null

Controls the item’s appearance while it fits in the strip and is rendered as a Button.