ActionRow

<ActionRow> is the canonical Settings row when the action is a verb, not a stored value. Label + optional description on the left, button on the right. Spec’d in 13-section-anatomy.md as S10.

import from "@na/ui/components/ActionRow" ▶ Open in Storybook packages/ui/src/components/ActionRow.tsx

When to use

• Settings-page rows where the “setting” is to perform an operation — Reset, Test, Regenerate, Reload.
• Any row that needs a button on the right and an explanatory label on the left.

Don’t use ActionRow for: stored boolean settings (ToggleRow), value-based settings (SelectRow, SliderRow, NumberInputRow), or rows in a list / table.

Default

Test voice

Plays a sample using the current voice settings.

Test voice

Reset to defaults

Clears your custom settings on this page.

Reset

<ActionRow
  label="Test voice"
  description="Plays a sample using the current voice settings."
  action={<Button variant="outline" size="sm">Test voice</Button>}
  status={<MutationStatus mutation={previewState} successText="" />}
/>

API

Prop	Type	Default	Description
label *	string	—	Sentence-case verb phrase ("Reset to defaults", "Test voice").
description	string	—	Optional one-sentence explanation under the label.
action *	ReactNode	—	The button (or buttons). Typically <Button variant="outline" size="sm">.
status	ReactNode	—	Optional status node rendered below the row — usually <MutationStatus>.
className	string	—	Forwarded.

Design guidelines

✓ Do

• Use ActionRow for verbs only. If the row stores a value, you want one of the value-row primitives.
• Pair with MutationStatus in the status slot for async actions.
• Use Button variant="outline" size="sm" for the action — quieter than primary.

✗ Don't

• Use destructive variant unless the action is irreversible. ConfirmPopover wrapping the button is the standard pattern for those.
• Stack 5 ActionRows in a row. Group with FormSection or Fieldset.

Accessibility

• Plain semantic structure (<div> + <Label> + button). The button carries its own role.
• Description is a <p> linked to the label by visual proximity.

Related

• ToggleRow, SliderRow, SelectRow, NumberInputRow — Row primitives for stored values.
• MutationStatus — Inline async result indicator.
• Fieldset — Group multiple rows.

▶ Open ActionRow stories in Storybook