Link — Playground
host element
tone
underline
variant
iconStart
iconEnd
target
external
State
<a kuiLink href="#docs">Read the docs</a>| Name | Type | Default | Description |
|---|---|---|---|
| tone | 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger' | undefined | undefined | Rest colour only; hover, focus and active never change it. Falls back to defaults.link.tone, then primary. |
| underline | 'always' | 'hover' | 'none' | undefined | undefined | When the link is underlined (defaults.link.underline, then hover). Use always inside running text; hover also underlines on focus-visible and active. |
| variant | 'body-lg' | 'body' | 'body-sm' | 'caption' | 'body' | Forwarded to the composed kuiText directive. The link has no typography scale of its own and ignores defaults.typography. |
| iconStart / iconEnd | string | undefined | undefined | Decorative icon name rendered through kui-icon before or after the content. An explicit iconEnd replaces the external-link glyph. |
| target / rel | string | undefined | undefined | Reflected onto the host as native attributes. rel is merged with noopener noreferrer for external links. |
| external | boolean | undefined | target() === "_blank" | Marks the link as leaving the app: adds rel="noopener noreferrer", the external-link glyph (unless iconEnd is set) and a hidden "(opens in a new tab)" suffix to the name. |
| disabled | boolean | false | A disabled anchor gets aria-disabled, tabindex -1 and a blocked click; a button also gets the native disabled attribute. |
| href, type, (click) | native attributes | - | Plain bindings on the host a or button. There is no as input: use a button without a real href for a JS-driven action. |
| --kui-link-color-default / -muted / -primary / -success / -warning / -danger / -disabled | CSS custom properties | - | Rest colour per tone and the disabled colour. |
| --kui-link-focus-ring / -radius-focus | CSS custom properties | - | Focus ring shadow and its corner radius. |
| --kui-link-decoration-thickness-rest / -active | CSS custom properties | - | Underline thickness at rest and on hover, focus and active. |
| --kui-link-gap | CSS custom property | - | Gap between the icons and the text. |
| KuiLinkOptions | interface | - | Shape of defaults.link: tone, underline and externalIcon. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.