Link

Hyperlink, with markdown support.

---

Props

• href (string): href HTML attribute to set to the element.
• label (string): Hyperlink content. Supports light markdown.
• [OPTIONAL] id (string): id HTML attribute to set to the element.
• [OPTIONAL] rel (string): rel HTML attribute to set to the element.
• [OPTIONAL] target (string): target HTML attribute to set to the element.
• [OPTIONAL] modifiers (string): List of modifiers to apply to the element. Defaults to "".
• [OPTIONAL] disabled (boolean): When element is disabled, a special disabled modifier is automatically added, and all its user interactions are disabled. Defaults to false.

---

Syntax

React

<UILink
  id="my-id"
  rel="noreferrer"
  href="https://test.com"
  modifiers="large primary"
  label="Lorem *ipsum*"
  target="_blank"
  onClick={myHandler}
/>

Vue

<UILink
  id="my-id"
  rel="noreferrer"
  href="https://test.com"
  modifiers="large primary"
  label="Lorem *ipsum*"
  target="_blank"
  :onClick="myHandler"
/>

Svelte

<UILink
  id="my-id"
  rel="noreferrer"
  href="https://test.com"
  modifiers="large primary"
  label="Lorem *ipsum*"
  target="_blank"
  onClick={myHandler}
/>

HTML

<a
  id="my-id"
  rel="noreferrer"
  tabindex="0"
  href="https://test.com"
  target="_blank"
  class="ui-link ui-link--large--primary"
>
  Lorem <span class="ui-markdown ui-markdown--strong">ipsum</span>
</a>

Syntax - disabled

React

<UILink
  href="https://test.com"
  label="Lorem *ipsum*"
  disabled
/>

Vue

<UILink
  id="my-id"
  rel="noreferrer"
  href="https://test.com"
  modifiers="large primary"
  label="Lorem *ipsum*"
  target="_blank"
  :onClick="myHandler"
/>

Svelte

<UILink
  id="my-id"
  rel="noreferrer"
  href="https://test.com"
  modifiers="large primary"
  label="Lorem *ipsum*"
  target="_blank"
  onClick={myHandler}
/>

HTML

<a
  href="https://test.com"
  tabindex="-1"
  class="ui-link ui-link--disabled"
>
  Lorem <span class="ui-markdown ui-markdown--strong">ipsum</span>
</a>