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>

<App>
  <Link to="https://docs.xmlui.org/" target="_blank">
    <HStack verticalAlignment="center">
      <Stack width="16px" height="16px" backgroundColor="purple" />
      XMLUI introduction
    </HStack>
  </Link>
</App>

Behaviors

This component supports the following behaviors:

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>

<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>

breakMode

default: "normal"

This property controls how text breaks into multiple lines. normal uses standard word boundaries, word breaks long words to prevent overflow, anywhere breaks at any character, keep prevents word breaking, and hyphenate uses automatic hyphenation. When not specified, uses the default browser behavior.

Available values:

ellipses

default: true

This property indicates whether ellipses should be displayed when the text is cropped (true) or not (false).

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>

<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>

horizontalAlignment

default: "start"

Manages the horizontal content alignment for child elements in the Link.

Available values: start (default), center, end

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>

<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.

maxLines

This property determines the maximum number of lines the component can wrap to. If there is no space to display all the contents, the component displays up to as many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines.

noIndicator

default: false

Indicates whether this link should have a distinct visual appearance.

overflowMode

default: "not specified"

This property controls how text overflow is handled. none prevents wrapping and shows no overflow indicator, ellipsis shows ellipses when text is truncated, scroll forces single line with horizontal scrolling, and flow allows multi-line wrapping with vertical scrolling when needed (ignores maxLines). When not specified, uses the default text behavior.

Available values:

preserveLinebreaks

default: false

This property indicates if linebreaks should be preserved when displaying text.

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:

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>

<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.

verticalAlignment

default: "start"

Manages the vertical content alignment for child elements in the Link.

Available values: start (default), center, end

Events

click

This event is triggered when the link is clicked.

Signature: click(event: MouseEvent): void

• event: The mouse event that triggered the click.

Exposed Methods

This component does not expose any methods.

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• icon: The icon within the Link component.

Styling

Theme Variables

Variable Explanations