Anchor

An anchor is a primitive for building custom links.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

Anchor also supports all valid HTMLAnchorElement props.

`analyticsContext`
Description	Additional information to be included in the `context` of Atlaskit analytics events that come from anchor.
Type	`{ [x: string]: any; }`

`children`
Description	Elements to be rendered inside the Anchor.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<ReactNode> \| React.ReactPortal`

`componentName`
Description	An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Anchor'.
Type	`string`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`href`
Required
Description	Standard links can be provided as a string, which should be mapped to the underlying router link component. Alternatively, you can provide an object for advanced link configurations by supplying the expected object type to the generic. @example `const MyRouterLink = forwardRef( ( { href, children, ...rest }: RouterLinkComponentProps<{ href: string; replace: boolean; }>, ref: Ref<HTMLAnchorElement>, ) => { ...`
Type	`string \| RouterLinkConfig`

`interactionName`
Description	An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see React UFO integration into Design System components.
Type	`string`

`newWindowLabel`
Description	Override the default text to signify that a link opens in a new window. This is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.
Type	`string`

`onClick`
Description	Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the 'analytics-next' package documentation for more information.
Type	`(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void`

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

`style`
Description	No description.
Type	`React.CSSProperties`

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

`xcss`
Description	Apply a subset of permitted styles powered by Atlassian Design System design tokens.
Type	`false \| (XCSSValue<"appearance" \| "color" \| "maxWidth" \| "grid" \| "borderColor" \| "clipPath" \| "filter" \| "marker" \| "mask" \| "height" \| "width" \| "translate" \| "content" \| "border" \| ... 487 more ... \| "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.