Earth Design System

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

Props

Prop	Type	Description	Default
`variant?`	`'accentPrimary' \| 'accentSecondary'\| 'criticalPrimary'\| 'criticalTertiary'\| 'neutralPrimary'\| 'neutralSecondary'\| 'neutralSecondaryIntense'\| 'neutralTertiary'`	Variant of the button.	`'accentPrimary'`
`size?`	`'large' \| 'standard' \| 'small'`	Size of the button.	`'standard'`
`icon`	`Icon`	Set the Icon for the button.	_
`loadingLabel?`	`Icon`	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.	_
`type?`	`'button' \| 'submit' \| 'reset'`	Specifies the button type.	`button`
`id?`	`string`	Specifies a unique id for the button.	_
`aria-label`	`string`	Describes the component to assistive tech users and the action or effect that will take place when the button is clicked.	_
`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.	_
`onClick?`	`function`	Function to call when the button is clicked.	_