• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Basic
    2. Different sizes
    3. Disabled state
    4. With target
    5. With chevron icon
  2. Properties
  3. Methods
    1. focusInner() => Promise<void>
  4. Shadow Parts
  5. Dependencies
    1. Used by
    2. Graph
Components Link
(external link)

ld-link #

This component is meant to be used in conjunction with the ld-icon. Please reffer to the ld-icon docs for further usage examples.

Examples #

Basic #

<ld-link>Link</ld-link>
<a class="ld-link">Link</a>
<LdLink>Link</LdLink>
Link
Link

Different sizes #

The ld-link component inherits its font-size and line-height.

<ld-typo variant="body-xs">
  <b>XS</b>: Lorem ipsum <ld-link>dolor sit amet</ld-link>, consectetur adipiscing elit.
</ld-typo>

<ld-typo variant="body-s">
  <b>S</b>: Lorem ipsum <ld-link>dolor sit amet</ld-link>, consectetur adipiscing elit.
</ld-typo>

<ld-typo variant="body-m">
  <b>M</b>: Lorem ipsum <ld-link>dolor sit amet</ld-link>, consectetur adipiscing elit.
</ld-typo>
<p class="ld-typo--body-xs">
  <b>XS</b>: Lorem ipsum <a class="ld-link">dolor sit amet</a>, consectetur adipiscing elit.
</p>

<p class="ld-typo--body-s">
  <b>S</b>: Lorem ipsum <a class="ld-link">dolor sit amet</a>, consectetur adipiscing elit.
</p>

<p class="ld-typo--body-m">
  <b>M</b>: Lorem ipsum <a class="ld-link">dolor sit amet</a>, consectetur adipiscing elit.
</p>
<LdTypo variant="body-xs">
  <b>XS</b>: Lorem ipsum <LdLink>dolor sit amet</LdLink>, consectetur adipiscing elit.
</LdTypo>

<LdTypo variant="body-s">
  <b>S</b>: Lorem ipsum <LdLink>dolor sit amet</LdLink>, consectetur adipiscing elit.
</LdTypo>

<LdTypo variant="body-m">
  <b>M</b>: Lorem ipsum <LdLink>dolor sit amet</LdLink>, consectetur adipiscing elit.
</LdTypo>
XS: Lorem ipsum dolor sit amet, consectetur adipiscing elit. S: Lorem ipsum dolor sit amet, consectetur adipiscing elit. M: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

XS: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

S: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

M: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Disabled state #

There are several ways to disable a link. The simplest one is by not using a href prop. However, this renders the link non-focusable. If you want the link to stay focusable even when it is supposed to be disabled, use the disabled prop on the Web Component, respectively set the aria-disabled attribute to true on the CSS component and keep the href set. The Web Component version of the link will prevent the default behavior of the anchor element on click. The CSS component will obviously not do this out of the box, so you will have to handle this on your side.

<ld-link href="#" disabled>Link</ld-link>
<a id="disabled-link" class="ld-link" href="#" aria-disabled="true">Link</a>

<script>
  document.getElementById('disabled-link').addEventListener('click', (ev) => {
    ev.preventDefault()
  })
</script>
<LdLink href="#" disabled>Link</LdLink>
Link
Link

With target #

When using target="_blank", a rel attribute with the value noreferrer noopener is applied automatically. Just in case. If you are using the CSS component version of the link, you will need to take care of this yourself. See https://web.dev/external-anchors-use-rel-noopener/ 
<ld-link href="#" target="_blank">
  Link which opens in a new tab
</ld-link>
<a class="ld-link" href="#" target="_blank" rel="noreferrer noopener">
  Link which opens in a new tab
</a>
<LdLink href="#" target="_blank">
  Link which opens in a new tab
</LdLink>
Link which opens in a new tab
Link which opens in a new tab

With chevron icon #

<ld-link chevron="start">Link</ld-link>
<ld-link chevron="end">Link</ld-link>
<a class="ld-link ld-link--chevron-start">Link</a>
<a class="ld-link ld-link--chevron-end">Link</a>
<LdLink chevron="start">Link</LdLink>
<LdLink chevron="end">Link</LdLink>
Link Link
Link Link

Properties #

Property Attribute Description Type Default
chevron chevron Displays chevron icon. "end" | "start" undefined
disabled disabled The disabled attribute sets aria-disabled="true" on the rendered anchor element. boolean undefined
download download Causes the browser to treat the linked URL as a download. boolean | string undefined
href href The URL that the hyperlink points to. string undefined
hreflang hreflang Hints at the human language of the linked URL. string undefined
key key for tracking the node's identity when working with lists string | number undefined
ldTabindex ld-tabindex Tab index of the input. number undefined
ping ping A space-separated list of URLs to ping on link follow. string undefined
ref ref reference to component any undefined
referrerpolicy referrerpolicy A space-separated list of URLs to ping on link follow. string undefined
target target The target attributed can be used in conjunction with the href attribute. See mdn docs for more information on the target attribute. "_blank" | "_parent" | "_self" | "_top" undefined

Methods #

focusInner() => Promise<void> #

Sets focus on the anchor.

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"anchor" the link anchor

Dependencies #

Used by #

  • ld-cookie-consent
  • ld-crumb

Graph #

graph TD;
  ld-cookie-consent --> ld-link
  ld-crumb --> ld-link
  style ld-link fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS