All components (204)
Text link
Navigation · Link · .amset-link
What it is and when to use it
A text link. With href it is a real <a>: it opens in another tab with a middle click, the address can be copied and the screen reader says "link".
When to use it
- To go somewhere else. The usual rule: if it changes place, link; if it changes state, button.
tone="ink"for a link inside a table or a list, where a column of blue would be noise;tone="error"for what deletes or cancels.
When not to
- For something that navigates but has to look like a button,
ButtonLink. - For something that is pressed and does NOT navigate,
Button. An<a>withonClickthat does not lead anywhere is a badly placed button.
Keyboard: Tab reaches it, Enter follows it. With Ctrl/⌘ it opens in another tab, like any link — that is lost if a button is used.
Accessibility: it comes underlined, in the accent color and in bold: inside running text color cannot be the only thing that distinguishes a link (WCAG 1.4.1), and the accent against the surrounding text does not reach the 3:1 that would be needed. underline="hover" underlines it only when the pointer rests on it and underline="none" removes it, for a link that does not sit inside a paragraph (a menu, a bar). bare also removes the weight and is only valid outside a paragraph. If it opens in another tab, it is advisable to say so with a VisuallyHidden. Without href it is still a link for the reader (role="link"), focusable and with Enter.
Client-side routing: with RouterProvider around the application, the href goes through the navigate function you provide (the one from the project's router) instead of reloading the whole page. Clicks with Ctrl, ⌘, Shift or Alt, the middle button, a target of its own, download and destinations outside the application (another domain, mailto:, tel:, an anchor) are still handled by the browser.
Fine-tuning: --amset-link-color and --amset-link-offset.
What it looks like
Read the terms of use before continuing.
<Text>Read the <Link>terms of use</Link> before continuing.</Text>Props
Import it with import { Link } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | — |
bare | boolean | Also removes the weight. Only when the link is NOT inside running text: a whole card, a menu entry. Inside a paragraph, colour cannot be the only thing saying that something is a link (WCAG 1.4.1), and some people cannot tell that blue from the black next to it. |
className | string | — |
disabled | boolean | Disabled: it loses its destination and leaves the tab order. It is announced with `aria-disabled`, because an `<a>` cannot be disabled like a button. |
onPress | () => void | Called on press, with the mouse or the keyboard. It coexists with `onClick`. |
style | CSSProperties | — |
tone | "accent" | "secondary" | "tertiary" | "error" | "ink" | `accent` is the usual link. `ink` for a link inside a table or a list, where a column of blue would be noise: it stays bold, which is what distinguishes it. |
underline | LinkUnderline | The underline. `always` by default: inside a paragraph color is not enough (WCAG 1.4.1). The accent measured against the surrounding text gives 1.12:1 and 3:1 is needed, so without an underline axe flags it and whoever cannot tell that color apart does not see the link. `hover` shows it when the pointer rests on it and `none` removes it, for a link that does not sit in the middle of a text (a menu, a bar). |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-link-color | var(--amset-accent-text) |
--amset-link-offset | 0.15em |
How to change it
.amset-link {
--amset-link-color: ...;
--amset-link-offset: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: