'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Typography
Link
Goes somewhere. Inline in text, standalone, or muted, with external links marked.
Ant Design: Typography.Link
import { Link } from '@alea/ui';
Examples
Variants
Inline links are underlined; standalone and muted links suit navigation and footers.
Read the theming guide to change the accent.
InstallationMade in Caracas · Accessibility
React Aria docs (opens in a new tab)Props
Link props
A link, accessible and focus-visible, in three looks.
| Prop | Type | Default | Description |
|---|---|---|---|
external | boolean | - | Opens in a new tab with rel=noopener and an arrow. |
variant | "inline" | "muted" | "standalone" | 'inline' | inline: underlined accent text; standalone: no underline until hover; muted: text color. |
Accessibility
- External links add "(opens in a new tab)" for screen readers and rel=noopener.
- Inline links are underlined, so they don't rely on color.
Keyboard
| Key | Does |
|---|---|
| Enter | Follows the link |
Do and don't
Do
- Say where it goes: Read the pricing guide.
Don't
- Don't write "click here".
- Don't use a link for actions that change something: use Button.