Skip to main content

Type Alias: ActionButtonProps

ActionButtonProps = ActionButtonOwnProps & ActionLabellingProps

Defined in: components/ActionButton/ActionButton.tsx:143

Displays a semantic action trigger (entity: Action) in the utility silhouette — the ambient posture, for operations on content rather than commitments in a flow: toolbar controls, table-row actions, the trigger of an overflow menu, a card's inline "edit".

ActionButton and Button are both Action/root and read the same colour tree; what separates them is the weight of the commitment, exactly as Meter and ProgressBar are both Feedback/root separated by meaning. That makes the pair a semantic distinction rather than a size variant, which is why neither carries a size prop (CONTRACT §4):

  • Command (Button) — "commit to this": submit, confirm, the primary action of a surface. Wears the theme's command radius, semibold type and the generous command inset (40px on the desktop).
  • Utility (ActionButton) — "operate on that": ambient, repeatable, often icon-only. Wears the control radius, plain label type and the tight control inset (34px on the desktop), so it recedes beside a command.

Those 34px are the field row: identical to TextField, Select and every other control, because a utility trigger's job is to stand beside a field. That is also why its type is not a step smaller — only its weight is (regular against the command's semibold). Dropping the size as well would desynchronise it from the fields it aligns with; a caller who genuinely needs smaller trigger text asks for it at the call site.

Entity = Action → colors: action, radii: control, border: outline.control, sizing: hit (floor on both axes), spacing: inset.control (sm block / md inline) plus gap.inline.xs between glyph and label, typography: label.md, motion: feedback.

Anatomy (data-part): root · icon · label.

Example​

// Toolbar: icon-only is the common shape
<ActionButton icon={<Icon intent="action.search" />} aria-label={searchLabel} />

// Row action, quiet until hovered
<ActionButton evaluation="muted" icon={<Icon intent="action.close" />}>
  Remove
</ActionButton>