Link · Astryx

Link@astryxdesign/core v0.1.1 · Link

Usage

A styled anchor for inline and standalone text navigation. Supports external links, underline variants, tooltips, and custom link components for router integration. Use it for navigating between pages or to external URLs.

ts
import {Link} from '@astryxdesign/core/Link'

Best practices

Guidance	Practices
Do	Write descriptive, concise link text that clearly communicates the destination.
Do	Set `isStandalone` when the link appears outside of inline text, so it receives proper base font sizing.
Do	Only set `label` when the link content is not descriptive text (e.g. an icon-only link). For text links, the visible text is already the accessible name; adding `label` overrides it for screen readers, which is harmful.
Don't	Use Link for actions that do not navigate; use a Button instead.
Don't	Use generic text like "click here" or "read more"; describe the destination.
Don't	Set `label` on text links; `aria-label` prevents assistive technology from reading the actual link content.

Examples

Common configurations, variations, and states.

Link — External Links

Open in Playground

A vertical list of external links that open in a new tab with an indicator icon.

Link — Inline Text

Open in Playground

A link embedded within a paragraph of body text.

Link — With Tooltips

Open in Playground

Horizontal row of standalone links with descriptive hover tooltips.