tuix-link
A styled anchor that degrades to plain text when disabled.
Variants
primary is the brand colour; secondary is white, for dark surfaces and
photos. Both underline on hover. The element adds no focus style of its own, so
a focused link shows the browser's own outline.
Disabled
A disabled link is not an anchor at all: the component renders a <div>, so
there is nothing to focus, hover or click.
The same happens without an href, which is useful for a link whose target is
not loaded yet.
Targets
target defaults to _blank.
Pass target="_self" for in-app navigation. Client-side routing needs the router's own link component, because this
element always does a full navigation.
API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
href | href | string | None | Target URL. Without it the link renders as text |
target | target | LinkTarget | _blank | _blank, _self, _parent or _top |
variant | variant | MainVariant | primary | primary is the brand colour, secondary is white |
disabled | disabled | boolean | false | Renders as inert text, not an anchor |
dark | dark | boolean | false | Dark palette |
Slots
| Slot | Content |
|---|---|
| default | The link text, styled with TextSize.Link |
The element fires no custom events; a click on the anchor behaves natively.
Notes
The link exposes its colour as the --t-link-text-color custom property, which
a nested tuix-text picks up instead of its own color.
That is what keeps a link inside a paragraph on the link colour: