Skip to main content

Interface: ButtonOwnProps

Defined in: components/Button/Button.tsx:37

Button props except the labelling contract — the reusable half.

Composites that always render a visible label (e.g. FormSubmit) extend this and declare children themselves, instead of carrying the icon-only branch of ButtonProps they can never take.

Extends​

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

Properties​

composition?​

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

Defined in: components/Button/Button.tsx:69

Slot this button occupies inside a parent composite (FSL §4). Emitted as data-composition on the DOM and consumed at runtime by composites that need to reorder or style actions by role — notably DialogActions, which reorders children per platform convention (iOS vs Windows).

Orthogonal to evaluation (authorial voice) and consequence (effect on state): composition is purely positional semantics.

consequence?​

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

Defined in: components/Button/Button.tsx:58

Effect on state this button's action produces. Emitted as data-consequence on the DOM so host integrations (confirm wrappers, telemetry, undo/redo hooks) and tests can observe the contract.

Carries colour in exactly one case: destructive on the quiet rung (evaluation="muted") tints the ink, because a part that paints no fill has nowhere else to say it — 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/Button/Button.tsx:97

Data scope identifier for the button.

Default​

'button'

evaluation?​

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

Defined in: components/Button/Button.tsx:45

Semantic emphasis.

Default​

'primary'

icon?​

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

Defined in: components/Button/Button.tsx:87

An <Icon> element naming the glyph by intent. Button forces the text size step, so the glyph tracks the label's own size and its ink lands inside the cap-height band — pass the intent, let the button own the scale.

Omit children to render an icon-only button: the control becomes a square (the block inset is mirrored on the inline axis and the glyph slot squares to one line) and aria-label becomes required. The square resolves to the same height as a labelled CTA, so a toolbar mixing the two keeps one baseline.

Example​

<Button icon={<Icon intent="action.search" />}>Search</Button>

iconPlacement?​

optional iconPlacement?: ActionIconPlacement

Defined in: components/Button/Button.tsx:92

Which side of the label the icon sits on.

Default​

'leading'