Components · Navigation & Layout
Link
An underlined link for moving to another page or place.
Component Workbench
Switch between the live interactive preview, syntax-highlighted implementation code, copyable AI coding agent prompt, and designer anatomy blueprint.
Link · Canonical Spec
Before you start, read the installation guide. Our core principles explain why Aster works this way.
<a class="as-link" href="/docs/installation">Read the installation guide</a>
<a class="as-link as-link--muted" href="/docs/principles">Core principles</a># Aster Component Implementation Prompt — Link ## 1. Component Purpose & Canonical Role - **Component:** Link (`link`) - **Category:** Navigation & Layout - **Native Element:** `<a>` - **Summary:** An underlined link for moving to another page or place. - **When to Use:** Moving to another page or place, including links within text. - **When Not to Use:** Actions such as saving or deleting. Use Button instead. ## 2. Authoritative Repository Files - **Component CSS:** `components/link/link.css` - **Component Spec:** `docs/components/link.md` - **Agent Contract:** `skills/using-aster-components/SKILL.md` - **Compiled Bundle:** `dist/css/aster.css` ## 3. Canonical HTML Structure & Classes ```html <a class="as-link" href="/docs/installation">Read the installation guide</a> <a class="as-link as-link--muted" href="/docs/principles">Core principles</a> ``` ## 4. Measured Geometry Measured from the rendered component when this page loads. ## 5. Non-Negotiable Aster Constraints 1. Bind colors to `--as-semantic-color-*` tokens, never primitives or hex values. 2. Use the radius tokens, with 4px as the smallest component radius. 3. Aster has one standard density, with no compact mode. 4. Keep text at 4.5:1 contrast and interactive elements keyboard operable. ## 6. Verification Commands ```bash npm run test:components npm run test:browser ```
When to use it
Do
- Describe where the link goes.
- Keep the underline so links are easy to spot.
Don't
- Write "click here".
- Use it for actions. Use Button instead.
Variants & States
Every option, rendered live with real styles.
Accessibility & Keyboard Interaction
Requirements for using this component accessibly.
| Topic | Requirement |
|---|---|
| Keyboard | Native anchor: reachable with Tab and activated with Enter. |
| Link text | Describe the destination. Avoid "click here". |
| Color | The underline stays, so links aren't identified by color alone. |
Tokens
Values update with the current theme.
| Role | Token | Current value |
|---|---|---|
| Text | --as-semantic-color-interactive-link | |
| Muted text | --as-semantic-color-text-muted | |
| Focus ring | --as-semantic-color-border-focus |