ESLint plugin
The essential plugin for use with the Atlassian Design System.no-html-anchor
Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that include event tracking, automatic router configuration, ensure accessible implementations, and provide access to ADS styling features like design tokens.
Use Atlassian Design System components such as the Link or LinkButton components when suitable. There may also be other components better-suited depending on the use case. If these components aren't suitable, use the Anchor primitive which helps you build custom links with Atlassian Design System styling.
Examples
This rule marks code as violations when it finds native HTML anchor elements.
Incorrect
<a href="/">
^ Using a native HTML `<a>`
Hello, World!
</a>
<div role="link" tabIndex="0" data-href="https://www.atlassian.com">
^^^^^^^^^^^ Using `role="link"` to create links
Hello, World!
</div>
Correct
import Anchor from '@atlaskit/primitives/anchor';
<Anchor href="/">Hello, World!</Anchor>;
import Link from '@atlaskit/link';
<Link href="/">Hello, World!</Link>;
import { LinkButton } from '@atlaskit/button/new';
<LinkButton href="/">Hello, World!</LinkButton>;