Link
Reusable link component.
Usage
Components are auto-discovered. Use the component directly in any .wrn view:
<Link
href="#"
label="Link"
external="false"
/>Legacy mount name: data-component="Link".
Props and attributes
| Prop | Type | Requirement | Default |
|---|---|---|---|
href | string | Optional | "#" |
label | string | Optional | "Link" |
external | boolean | Optional | false |
className | string | Optional | "" |
Slots
This component does not declare a slot.
Events
This component does not declare a custom event.
Source contract
Installed source: components/Link.wrn
component Link {
props {
href = "#"
label = "Link"
external = false
className = ""
}
view {
<a href="{href}" target="{external ? '_blank' : ''}" rel="{external ? 'noreferrer' : ''}" class="font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 {className}">{label}<span data-show="external" aria-hidden="true"> ↗</span>
</a>
}
}