Skip to main content

Interface: FormSubmitProps

Defined in: composites/Form/Form.tsx:319

Props for the FormSubmit component.

Wraps Button — inherits every Button prop except type (always "submit") and reassigns semantic defaults. consequence, composition, and isPending are surfaced explicitly because their defaults differ from Button's.

Extends​

Properties​

children​

children: ReactNode

Defined in: composites/Form/Form.tsx:324

Visible submit label — required: a submit control is never icon-only (the commitment it performs must be named in words).

composition?​

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

Defined in: composites/Form/Form.tsx:337

Composition slot within the Form. Emitted as data-composition for host CSS / tests / future composites.

Default​

'primaryAction'

Overrides​

Omit.composition

consequence?​

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

Defined in: composites/Form/Form.tsx:331

Effect on state. Emitted as data-consequence; not used for coloring (visual distinction, if any, is a theme / host-CSS concern — same contract as MenuItem).

Default​

'committing'

Overrides​

Omit.consequence

data-scope?​

optional data-scope?: string

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

Data scope identifier for the button.

Default​

'button'

Inherited from​

ButtonOwnProps.data-scope

evaluation?​

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

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

Semantic emphasis.

Default​

'primary'

Inherited from​

Omit.evaluation

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>

Inherited from​

ButtonOwnProps.icon

iconPlacement?​

optional iconPlacement?: ActionIconPlacement

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

Which side of the label the icon sits on.

Default​

'leading'

Inherited from​

ButtonOwnProps.iconPlacement

isPending?​

optional isPending?: boolean

Defined in: composites/Form/Form.tsx:347

Whether the form is currently submitting. Host-controlled — fsl-ui does not own the submission lifecycle. Forwarded to React Aria's native pending state, which is deliberately not disabled: the button stays focusable (a control that vanishes from under the keyboard user mid-submit is the classic pending defect), announces the change to AT, blocks press and implicit re-submission (its type rides as button while pending), and emits data-pending for host CSS.

Overrides​

Omit.isPending