Link

A Link component represents a navigation target within the app or a reference to an external web URL.

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://ncrm.azurewebsites.net/" target="_blank">
    <HStackverticalAlignment="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>

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>

icon

This property allows you to add an icon (specify the icon's name) to the link.

<App>
  <Link icon="home" label="Home" />
  <Link icon="drive">Drives</Link>
</App>

label

This property sets the label of the component.

target (default: "_self")

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:

The following sample opens its link in a new tab:

<App>
  <Link to="https://docs.xmlui.com/" target="_blank">
    Open XMLUI overview in a new tab
  </Link>
</App>

to

This property defines the URL of the link.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Link component uses these theme variables to customize its appearance:

• textDecorationColor
• color
• fontWeight
• textDecorationLine
• textUnderlineOffset
• textDecorationStyle
• textDecorationThickness

The following sample theme sets a few visual properties of Link:

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "textColor-Link--hover": "orangered",
    "textDecorationColor-Link": "purple",
    "textDecorationThickness-Link": "4px",
    "textDecorationStyle-Link": "dotted"
  }
}

Theme Variables

Variable Explanations