Icon button

An icon-only button lets people take a common and recognizable action where space is limited.

Examples Code Usage Changelog

Props

Each button type also supports its respective HTML element attributes, except for:

disabled (use isDisabled instead)
style
role

`analyticsContext`
Description	Additional information to be included in the `context` of Atlaskit analytics events that come from button. See the pressable or anchor primitive code examples for more information.
Type	`{ [x: string]: any; }`

`appearance`
Description	The button style variation. The button style variation.
Type	`"default" \| "primary" \| "subtle" \| "rovo" \| "discovery"`

`aria-label`
Description	Defines a string value that labels the current element. @see aria-labelledby.
Type	`never`

`autoFocus`
Description	Set the button to autofocus on mount.
Type	`boolean`

`data-testid`
Description	No description.
Type	`never`

`icon`
Required
Description	Places an icon within the button.
Type	`ComponentClass<Omit<IconProps, "size"> \| Omit<NewIconProps, "size" \| "spacing">, any> \| FunctionComponent<Omit<IconProps, "size"> \| Omit<...>>`

`interactionName`
Description	An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See the pressable or anchor primitive code examples for more information.
Type	`string`

`isDisabled`
Description	Disable the button to prevent user interaction.
Type	`boolean`

`isLoading`
Description	Conditionally show a spinner over the top of a button
Type	`boolean`

`isSelected`
Description	Indicates that the button is selected.
Type	`boolean`

`isTooltipDisabled`
Description	Prevents a tooltip with the label text from showing. Use sparingly, as most icon-only buttons benefit from a tooltip or some other text clarifying the action.
Type	`boolean`

`label`
Required
Description	Provide an accessible label, often used by screen readers.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`onBlur`
Description	Handler called on blur.
Type	`(event: FocusEvent<HTMLButtonElement, Element>) => void`

`onClick`
Description	Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.
Type	`(e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void`

`onFocus`
Description	Handler called on focus.
Type	`(event: FocusEvent<HTMLButtonElement, Element>) => void`

`ref`
Description	No description.
Type	`((instance: HTMLButtonElement) => void) \| RefObject<HTMLButtonElement>`

`shape`
Description	Set the shape of the icon, defaults to square with rounded corners.
Type	`"default" \| "circle"`

`spacing`
Description	Controls the amount of padding in the button.
Type	`"default" \| "compact"`

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`tooltip`
Description	Props passed down to the Tooltip component.
Type	`{ content?: ReactNode \| (({ update }: { update?: () => void; }) => ReactNode); testId?: string; component?: ComponentType<TooltipPrimitiveProps> \| ForwardRefExoticComponent<...>; ... 16 more ...; shouldRenderToParent?: boolean; }`

Was this page helpful?

We use this feedback to improve our documentation.