Link
Styled anchor for navigation, standalone or inline within prose
Category: navigation · WCAG 2.2-AA · link, anchor, navigation
Variants
- standalone
- inline
Sizes
- sm
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'standalone' | 'inline' | standalone | Selects the visual style variant. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
external | boolean | false | When true, treats the link as external (opens in a new tab with rel safety). |
href | string | — | The destination URL. |
asChild | boolean | false | Render the single child element instead of cascivo's own `<a>`, so the link styling lands on your router's Link. ⚠ This — not `setLinkComponent` — is how you style an in-content link in a routed app; `setLinkComponent` only covers the config-driven navs. See docs/USING-WITH-A-ROUTER.md. |
Design tokens
--cascivo-link-color--cascivo-color-accent--cascivo-color-accent-hover--cascivo-color-accent-active--cascivo-radius-sm--cascivo-focus-ring
When to use
- Navigating to another page, view, or resource via a real href
- Inline cross-references within prose (variant="inline")
- Linking to an external destination with a clear new-tab indicator (external)
When not to use
- Triggering an action or mutation with no destination — use Button
- Submitting a form — use a submit Button
How to build an accessible Link in React →
Examples
Standalone
<Link href="/docs">View documentation</Link>Inline
Inline links inherit the surrounding font size and stay underlined.
<p>Read the <Link variant="inline" href="/guide">guide</Link> first.</p>External
Opens in a new tab with rel="noreferrer" and a visual indicator.
<Link external href="https://example.com">Example</Link>Related components
- Button — Button is for actions; Link is for navigation