Components / actions

Link

Inline navigation text. Use Brand for links inside body copy and Neutral (always underlined) where the link sits among other neutral text.

import { Link } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Link } from '@basiiik/ui';

<Link>View pricing</Link>

• Hover is CSS (:hover); Focused is :focus-visible; Disabled sets aria-disabled and removes href.
• Storybook: Actions/Link.

Props

States. Hover is CSS (:hover); Focused is :focus-visible; Disabled sets aria-disabled and removes href.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Navigate to another page or anchor
• Inline references inside text

Do not use it when

• Performing an action (use Button)

Rules for agents

• A Link always navigates: it has an href to a page or anchor; actions use Button
• Use variant="brand" inside body copy and variant="neutral" among other neutral text (it is always underlined)
• Mark external links: add an icon in trailingIcon and say so in the text or with visually hidden text
• Use aria-current="page" when the Link points at the current page
• Use disabled only for a link that is temporarily unavailable; it removes href and sets aria-disabled

Avoid

• A Link with an onClick and no real destination (use Button)
• Vague link text such as 'Click here' or 'Read more' with no context
• Opening a new tab without telling the user
• Styling a Button to look like a Link, or a Link to look like a Button

Writing the content

• Link text says where it goes: 'View pricing', 'Read the release notes'
• Make the link text unique on the page where possible
• Use sentence case

Keyboard

• Enter activates
• Tab moves focus

Accessibility

• aria-current="page" for the current page
• aria-disabled on a disabled link (also remove href)

Colour tokens it reads

Related

• Button
• Breadcrumb

actions 24 Figma variants Try it in the live demo