Button API

variant?

'accentPrimary' | 'accentSecondary'| 'criticalPrimary'| 'criticalTertiary'| 'neutralPrimary'| 'neutralSecondary'| 'neutralSecondaryIntense'| 'neutralTertiary'

Variant of the button.

'accentPrimary'

size?

'large' | 'standard' | 'small'

Size of the button.

'standard'

iconStart?

Icon

The icon to display before the buttons children.

_

iconEnd?

Icon

The icon to display after the buttons children.

_

loadingLabel?

string

Text to read out to assistive technologies when button is loading.

_

isDisabled?

boolean

If true, the button is disabled.

false

isLoading?

boolean

If true ,the button will display a loading indicator.

false

isPressed?

boolean

If true, the button will be visually styled as pressed and the aria-pressed attribute will be set accordingly.

_

children?

ReactNode

The content to be displayed inside the button.

_

id?

string

Specifies a unique id for the button.

_

type?

'button' | 'submit' | 'reset'

Specifies the button type.

button

form?

string

Specifies the form element the button is associated with.

_

onClick?

function

Function to call when the button is clicked.

_

onBlur?

function

Function to call when the button loses focus.

_

onFocus?

function

Function to call when the button receives focus.

_

onKeyDown?

function

Function to call when a key is pressed while the button is focused.

_

aria-controls?

string

Identifies the element (or elements) that the button controls.

_

aria-expanded?

boolean

Indicates whether the button, or another element that it controls, is currently expanded or collapsed.

false

aria-haspopup?

boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'

Indicates the availability and type of interactive popup element, such as menu or dialog, triggered by the button.

_