Skip to main content

Interface: ActionButtonOwnProps

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

ActionButton props except the labelling contract.

Extends​

  • Omit<RACButtonProps, "style" | "children" | "aria-label">

Properties​

composition?​

optional composition?: "primaryAction" | "secondaryAction" | "dismissAction"

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

Slot this action occupies inside a parent composite (FSL §4). Emitted as data-composition.

consequence?​

optional consequence?: "neutral" | "committing" | "destructive"

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

Effect on state this action produces. Emitted as data-consequence for host integrations and tests.

Carries colour in exactly one case: destructive on the quiet rung (evaluation="muted") tints the ink — see resolveConsequenceInk. On every filled rung the fill is the voice and evaluation owns it.

Default​

'neutral'

data-scope?​

optional data-scope?: string

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

Data scope identifier.

Default​

'action-button'

evaluation?​

optional evaluation?: "primary" | "secondary" | "accent" | "muted" | "negative"

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

Semantic emphasis. secondary is the default: an ambient operation announces itself with a quiet fill, not with the authority of a command.

Use muted for the quiet posture — a toolbar control that shows no fill until hovered. Use negative when the destructive action is the loud one on the surface and should read as a filled red command; for a destructive control that sits as a peer among its siblings, keep the rung and set consequence="destructive", which tints the ink instead. Either way consequence is what a confirm wrapper dispatches on.

Default​

'secondary'

icon?​

optional icon?: ReactElement<IconProps, string | JSXElementConstructor<any>>

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

An <Icon> element naming the glyph by intent. The button forces the text size step, so the glyph tracks the label and its ink lands inside the cap-height band.

Omit children for the icon-only form — the dominant shape for a toolbar control: the button becomes a square at the utility height and aria-label becomes required by the type system.

Example​

<ActionButton icon={<Icon intent="action.close" />} aria-label={removeLabel} />

iconPlacement?​

optional iconPlacement?: ActionIconPlacement

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

Which side of the label the icon sits on.

Default​

'leading'