@atlaskit/primitives/constellation/anchor/examples.mdx

Primitives are token-backed low-level building blocks.

---
title: Anchor
description: An anchor is a primitive for building custom links.
order: 0
---

import SectionMessage, { SectionMessageAction } from '@atlaskit/section-message';
import Link from '@atlaskit/link';

import AnchorDefault from '../../examples/constellation/anchor/default';
import AnchorBasic from '../../examples/constellation/anchor/basic';
import AnchorStyled from '../../examples/constellation/anchor/styled';
import AnchorHtmlAttributes from '../../examples/constellation/anchor/html-attributes';
import AnchorRouterLinkConfiguration from '../../examples/constellation/anchor/router-link-configuration';
import AnchorPressTracing from '../../examples/constellation/anchor/press-tracing';
import AnchorAnalytics from '../../examples/constellation/anchor/analytics';
import AnchorAnalyticsGASv3 from '../../examples/constellation/anchor/analytics-gasv3';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<SectionMessage
	appearance="information"
	actions={[
		<SectionMessageAction href="/components/link/examples">
			View link documentation
		</SectionMessageAction>,
		<SectionMessageAction href="/components/button/link-button/examples">
			View link button documentation
		</SectionMessageAction>,
	]}
>
	Anchor is for building non-text links, such as a card. It comes with minimal styling. If you're
	using a link within text, use the purpose-built{' '}
	<Link href="/components/link/examples">link component</Link>. For links that appear as buttons,
	use the existing <Link href="/components/button/link-button/examples">link button component</Link>
	.
</SectionMessage>

<CodeDocsHeader
	name="@atlaskit/primitives"
	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
	directoryName="primitives"
/>

Anchor is a primitive for building custom links with Atlassian Design System styling, routing
support, and built-in event tracking. It renders an anchor `<a>` element.

## Default

Anchor is unstyled besides a default underline and consistent Atlassian Design System focus styles.

If you are using the [CSS reset](/components/css-reset/examples), anchor will also inherit some
global styles.

<Example Component={AnchorDefault} packageName="@atlaskit/primitives/anchor" />

## Basic styling with XCSS

Anchor can be styled further using the design system styling API,
[XCSS](/components/primitives/xcss).

<Example Component={AnchorBasic} packageName="@atlaskit/primitives/anchor" />

## Advanced styling

Use a combination of XCSS and other primitives for more complex designs.

<Example Component={AnchorStyled} packageName="@atlaskit/primitives/anchor" />

## HTML attributes

Anchor can pass all valid
[anchor HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes),
such as `rel` or `download`, to the underlying `<a>` element.

<Example Component={AnchorHtmlAttributes} packageName="@atlaskit/primitives/anchor" />

## Router links

Routing libraries often supply link components enhanced with routing support. You can configure this
in the [AppProvider context](/components/app-provider/examples#router-links), and anchor will
automatically use it.

This example shows a configuration for
[React Resource Router](https://github.com/atlassian-labs/react-resource-router), however any
routing library can be used.

Using this method, anchor accepts `href` as a string for standard usage. For advanced usage, an
object can be passed.

Anchor will only render a router link if:

- a link component is set in the app provider
- it's not an external link (starting with `http://` or `https://`)
- it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.).

<Example
	Component={AnchorRouterLinkConfiguration}
	packageName="@atlaskit/primitives/anchor"
	appearance="source-only"
	isCodeSandboxDisabled
/>

<Snippet name="primitives-event-tracking-header" variables={{ componentName: 'anchor' }} />

<Example Component={AnchorAnalytics} packageName="@atlaskit/primitives/anchor" />

<Snippet name="primitives-event-tracking-gasv3" />

<Example Component={AnchorAnalyticsGASv3} packageName="@atlaskit/primitives/anchor" />

<Snippet name="primitives-event-tracking-ufo" variables={{ componentName: 'anchor' }} />

<Example Component={AnchorPressTracing} packageName="@atlaskit/primitives/anchor" />