Internal
Default .ui-link for in-app navigation.
Text navigation with accent color — underline on hover/focus, optional external affordance.
<a class="ui-link" href="#api">Open API section</a>
<a class="ui-link ui-link--external" href="https://example.com"
target="_blank" rel="noopener noreferrer">
External resource
<span class="ui-icon ui-icon--external-link ui-link__icon" aria-hidden="true"></span>
</a>import { Link } from 'caustica-design/core'
<Link href="#api">Open API section</Link>
<Link href="https://example.com" external>External resource</Link>Default .ui-link for in-app navigation.
.ui-link--external with icon and safe rel.
<a href> for navigation — not a button styled as a link.rel="noopener noreferrer"; the
icon is decorative (aria-hidden).
| Class | Description |
|---|---|
.ui-link |
Base text link. |
.ui-link--external |
External link layout (gap for icon). |
.ui-link__icon |
External-link mask icon sizing. |
From src/core/Link.tsx — extends
AnchorHTMLAttributes<HTMLAnchorElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
external |
boolean |
false |
Sets target="_blank", merges noopener /
noreferrer, and shows the external icon.
|
href |
string |
— | Destination URL (native). |
children |
ReactNode |
— | Link label. |
className |
string |
— | Merged onto the anchor. |
rel / target |
native | — | Merged with external defaults when external is true. |