Link
@xui/linkA styled anchor.
Install
pnpm add @xui/link Add the barrel to a standalone component's imports:
import { XuiLinkImports } from '@xui/link';
@Component({
imports: [XuiLinkImports],
// …
})Examples
Default
Loading preview…
<a xuiLink href="https://xuijs.org" color="link" underline="always">Documentation</a>Underline
Loading preview…
<div class="flex flex-col items-start gap-2">
<a xuiLink underline="always" >always</a>
<a xuiLink underline="hover" >hover</a>
<a xuiLink underline="none" >none</a>
</div>In running text
Loading preview…
<p class="text-foreground-muted max-w-prose">
Every component styles itself with semantic utilities that resolve through the
<a xuiLink color="inherit" underline="hover" href="https://xuijs.org">token layer</a>,
so switching theme re-colours the whole page without a rebuild.
</p>API
A styled anchor.
Variants
underlinealwayscolorlinkInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''colorXuiLinkVariants['color']Link colour. current follows the surrounding text — for links inside body copy that should not break the line's colour.this.config.colorunderlineXuiLinkVariants['underline']When to underline: always, only on hover, or none. Prefer always for links inside prose, where the underline is the only thing marking them.this.config.underline