Typography
Link
A link. It uses a high-contrast text color and keeps a clear focus ring when you tab to it.
ReactVueWeb Components
View in Storybook Playground
Examples
<Link href="/docs">ドキュメント</Link>
<Link href="https://example.com" external>外部サイト</Link>Props
| Name | Type | Default | Description |
|---|---|---|---|
status | LinkStatus | primary | Color role. @default 'primary' |
quiet | boolean | false | Inherit text color until hover (for links inside dense copy). @default false |
external | boolean | — | Mark as opening in a new tab: sets `target`/`rel`, shows an outward-arrow affordance, and appends a visually-hidden "(opens in new tab)" hint. |
children | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.