Button API

API reference docs for theButtoncomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

PropTypeDescriptionDefault
variant?'accentPrimary' | 'accentSecondary'| 'criticalPrimary'| 'criticalTertiary'| 'neutralPrimary'| 'neutralSecondary'| 'neutralSecondaryIntense'| 'neutralTertiary'Variant of the button.'accentPrimary'
size?'large' | 'standard' | 'small'Size of the button.'standard'
iconStart?IconThe icon to display before the buttons children._
iconEnd?IconThe icon to display after the buttons children._
loadingLabel?stringText to read out to assistive technologies when button is loading._
isDisabled?booleanIf true, the button is disabled.false
isLoading?booleanIf true ,the button will display a loading indicator.false
isPressed?booleanIf true, the button will be visually styled as pressed and the aria-pressed attribute will be set accordingly._
children?ReactNodeThe content to be displayed inside the button._
id?stringSpecifies a unique id for the button._
type?'button' | 'submit' | 'reset'Specifies the button type.button
form?stringSpecifies the form element the button is associated with._
onClick?functionFunction to call when the button is clicked._
onBlur?functionFunction to call when the button loses focus._
onFocus?functionFunction to call when the button receives focus._
onKeyDown?functionFunction to call when a key is pressed while the button is focused._
aria-controls?stringIdentifies the element (or elements) that the button controls._
aria-expanded?booleanIndicates 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._