Link icon button

An icon-only button that helps people navigate to a common link or page location.

Examples Code Usage Changelog

Props

Common 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.
Type	`"default" \| "primary" \| "rovo" \| "discovery" \| "subtle"`

`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`

`href`
Required
Description	Provides a URL for link buttons. When using an AppProvider with a configured router link component, a `RouterLinkConfig` object type can be provided for advanced usage. See the Link Button routing example for more details. URL to navigate to.
Type	`string \| RouterLinkConfig`

`icon`
Required
Description	Places an icon within the button.
Type	`React.ComponentClass<Omit<IconProps, "size"> \| Omit<NewIconProps, "size" \| "spacing">, any> \| React.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`

`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 \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`onBlur`
Description	Handler called on blur. Handler called on blur.
Type	`(event: React.FocusEvent<HTMLAnchorElement, 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. 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: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void) & ((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void)`

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

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

`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	`{ testId?: string; analyticsContext?: Record<string, any>; content?: React.ReactNode \| (({ update }: { update?: () => void; }) => React.ReactNode); component?: React.ComponentType<TooltipPrimitiveProps> \| React.ForwardRefExoticComponent<...>; ... 15 more ...; shouldRenderToParent?: boolean; }`

Was this page helpful?

We use this feedback to improve our documentation.