Logo

Link

Link creates clickable navigation elements for internal app routes or external URLs. You can use the label and icon properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations.

Using Link

Link Appearance

You can use the label and icon properties of a Link to set its text and icon to display. If you want a custom appearance, you can nest your visual representation into Link:
<App>
  <Link to="https://docs.xmlui.org/" target="_blank">
    <HStack verticalAlignment="center">
      <Stack width="16px" height="16px" backgroundColor="purple" />
      XMLUI introduction
    </HStack>
  </Link>
</App>
Example: custom Link content
<App>
  <Link to="https://docs.xmlui.org/" target="_blank">
    <HStack verticalAlignment="center">
      <Stack width="16px" height="16px" backgroundColor="purple" />
      XMLUI introduction
    </HStack>
  </Link>
</App>

Properties

active (default: false)

Indicates whether this link is active or not. If so, it will have a distinct visual appearance.
<App>
  <Link>I'm an inactive link (by default)</Link>
  <Link active="true">I'm an active link</Link>
  <Link active="false">I'm an inactive link (explicit setting)</Link>
</App>
Example: active
<App>
  <Link>I'm an inactive link (by default)</Link>
  <Link active="true">I'm an active link</Link>
  <Link active="false">I'm an inactive link (explicit setting)</Link>
</App>

enabled (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).
<App>
  <Link>I'm an enabled link (by default)</Link>
  <Link enabled="false">I'm a disabled link</Link>
  <Link enabled="true">I'm an enabled link (explicit setting)</Link>
</App>
Example: enabled
<App>
  <Link>I'm an enabled link (by default)</Link>
  <Link enabled="false">I'm a disabled link</Link>
  <Link enabled="true">I'm an enabled link (explicit setting)</Link>
</App>

icon

This property allows you to add an optional icon (specify the icon's name) to the link.
<App>
  <Link icon="home" label="Home" />
  <Link icon="drive">Drives</Link>
</App>
Example: icon
<App>
  <Link icon="home" label="Home" />
  <Link icon="drive">Drives</Link>
</App>
If you want to specify paddings and gaps or put the icon to the right of the link text, use your custom link template (nest it into Link).

label

This property sets the label of the component. If not set, the component will not display a label.

target

This property specifies where to open the link represented by the Link. This property accepts the following values (in accordance with the HTML standard):
Available values:
ValueDescription
_selfThe link will open in the same frame as it was clicked.
_blankThe link will open in a new window or tab.
_parentThe link will open in the parent frame. If no parent, behaves as _self.
_topThe topmost browsing context. The link will open in the full body of the window. If no ancestors, behaves as _self.
_unfencedTopAllows embedded fenced frames to navigate the top-level frame, i.e. traversing beyond the root of the fenced frame.
The following sample opens its link in a new tab:
<App>
  <Link to="https://docs.xmlui.org/" target="_blank">
    Open XMLUI overview in a new tab
  </Link>
</App>
Example: target
<App>
  <Link to="https://docs.xmlui.org/" target="_blank">
    Open XMLUI overview in a new tab
  </Link>
</App>

to

This property defines the URL of the link. If the value is not defined, the link cannot be activated.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

VariableDefault Value (Light)Default Value (Dark)
backgroundColor-Linknonenone
border-Link0px solid $borderColor0px solid $borderColor
borderBottom-Linknonenone
borderBottomColor-Linknonenone
borderBottomStyle-Linknonenone
borderBottomWidth-Linknonenone
borderColor-Linknonenone
borderEndEndRadius-Linknonenone
borderEndStartRadius-Linknonenone
borderHorizontal-Linknonenone
borderHorizontalColor-Linknonenone
borderHorizontalStyle-Linknonenone
borderHorizontalWidth-Linknonenone
borderLeft-Linknonenone
color-Linknonenone
borderLeftStyle-Linknonenone
borderLeftWidth-Linknonenone
borderRight-Linknonenone
color-Linknonenone
borderRightStyle-Linknonenone
borderRightWidth-Linknonenone
borderStartEndRadius-Linknonenone
borderStartStartRadius-Linknonenone
borderStyle-Linknonenone
borderTop-Linknonenone
borderTopColor-Linknonenone
borderTopStyle-Linknonenone
borderTopWidth-Linknonenone
borderHorizontal-Linknonenone
borderVerticalColor-Linknonenone
borderVerticalStyle-Linknonenone
borderVerticalWidth-Linknonenone
borderWidth-Linknonenone
direction-Linknonenone
fontFamily-Linknonenone
fontSize-Linkinheritinherit
fontStretch-Linknonenone
fontStyle-Linknonenone
fontVariant-Linknonenone
fontWeight-Linknonenone
fontWeight-Link--active$fontWeight-bold$fontWeight-bold
gap-icon-Link$gap-tight$gap-tight
letterSpacing-Linknonenone
lineBreak-Linknonenone
lineHeight-Linknonenone
outlineColor-Link--focus$outlineColor--focus$outlineColor--focus
outlineOffset-Link--focus$outlineOffset--focus$outlineOffset--focus
outlineStyle-Link--focus$outlineStyle--focus$outlineStyle--focus
outlineWidth-Link--focus$outlineWidth--focus$outlineWidth--focus
padding-icon-Link$space-0_5$space-0_5
padding-Linknonenone
paddingBottom-icon-Linknonenone
paddingBottom-Linknonenone
paddingHorizontal-icon-Linknonenone
paddingHorizontal-Linknonenone
paddingLeft-icon-Linknonenone
paddingLeft-Linknonenone
paddingRight-icon-Linknonenone
paddingRight-Linknonenone
paddingTop-icon-Linknonenone
paddingTop-Linknonenone
paddingVertical-icon-Linknonenone
paddingVertical-Linknonenone
textAlign-Linknonenone
textAlignLast-Linknonenone
textColor-Link$color-primary-500$color-primary-600
textColor-Link--active$color-primary-400$color-primary-500
textColor-Link--hover$color-primary-400$color-primary-500
textColor-Link--hover--active$textColor-Link--active$textColor-Link--active
textDecorationColor-LinktextDecorationColor-LinktextDecorationColor-Link
textDecorationColor-Link--activetextColor-Link--activetextColor-Link--active
textDecorationColor-Link--hovertextColor-Link--hovertextColor-Link--hover
textDecorationLine-Linkunderlineunderline
textDecorationStyle-Linksolidsolid
textDecorationThickness-Linknonenone
textIndent-Linknonenone
textShadow-Linknonenone
textTransform-Linknonenone
textUnderlineOffset-Link$space-1$space-1
wordBreak-Linknonenone
wordSpacing-Linknonenone
wordWrap-Linknonenone
writingMode-Linknonenone

Variable Explanations

Theme VariableDescription
gap-icon-LinkThis property defines the size of the gap between the icon and the label.
This site is an XMLUI™ app.