Link button

A button for navigation and URL changes.

Examples Code Usage Changelog

Props

Each button type also supports valid anchor <a> tag HTML 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" \| "danger" \| "primary" \| "rovo" \| "subtle" \| "warning" \| "discovery"`

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

`children`
Required
Description	Text content to be rendered in the button.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`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.
Type	`string \| RouterLinkConfig`

`iconAfter`
Description	Places an icon within the button, after the button's text.
Type	`React.ComponentClass<Omit<IconProps, "size"> \| Omit<NewIconProps, "size" \| "spacing">, any> \| React.FunctionComponent<Omit<IconProps, "size"> \| Omit<...>>`

`iconBefore`
Description	Places an icon within the button, before the button's text.
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`

`onBlur`
Description	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.
Type	`(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void`

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

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

`shouldFitContainer`
Description	Option to fit button width to its parent width.
Type	`boolean`

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

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

Was this page helpful?

We use this feedback to improve our documentation.