Component reference

ActionRow

A row of actions that stays on one line while it fits and stacks whole when it does not: text actions become full-width lines in DOM order and icon actions stay together, so a row never ends ragged or leaves one action alone.

Preview

One line or a whole stack

A row of actions stays on one line while it fits. When it does not, the whole row stacks: text actions become full-width lines in their order and icon actions stay together, so no line ends ragged and no action is left alone.

packages/meowtail/stories/action-row.stories.tsxline 33tsx

render: () => (
  <Specimens>
    <Specimen label="Room for one line" width="content">
      {publishRow()}
    </Specimen>
    <Specimen label="Trailing edge" note="align=end, as a form footer." width="content">
      <ActionRow align="end">
        <Button variant="quiet">Cancel</Button>
        <Button>Save settings</Button>
      </ActionRow>
    </Specimen>
    <Specimen
      label="Too narrow for one line"
      note="The whole row stacks; the icon actions share one line."
    >
      <div style={{ maxWidth: "320px" }}>{publishRow()}</div>
    </Specimen>
  </Specimens>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ActionRow } from "meowtail";

<ActionRow align="end">
  <Button variant="quiet">Cancel</Button>
  <Button>Save settings</Button>
</ActionRow>

API reference

Keep the primary action last.

Props

Prop	Type	Default
`align`	`"start" \| "end"`	`"start"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as action-row in the meowtail component registry.