## Default

```html
<a class="syn-link syn-link--medium" href="javascript:void(0)"> Link label </a>
```

---

## Inline

If a link is placed within body text, it only breaks if variant without icon is used. If an icon is needed, a line break applies, and the body text is placed above and below the link.

```html
<p style="width: 266px">
  This is some random text that contains
  <a href="javascript:void(0)" class="syn-link"
    >a link that spans over several lines</a
  >
  to imply how it works in real life.
</p>
```

---

## Prefix Suffix Icons

Use the prefix and suffix slots to add icons.

```html
<nav class="storybook-demo-syn-link">
  <a href="javascript:void(0)" class="syn-link syn-link--medium">
    Open link in new window
    <syn-icon name="arrow_outward"></syn-icon>
  </a>
  <a href="javascript:void(0)" class="syn-link syn-link--medium">
    <syn-icon name="picture_as_pdf"></syn-icon>
    Download PDF
  </a>
  <a href="javascript:void(0)" class="syn-link syn-link--medium">
    <syn-icon name="picture_as_pdf"></syn-icon>
    Open PDF in new window
    <syn-icon name="arrow_outward"></syn-icon>
  </a>
</nav>
<style>
  .storybook-demo-syn-link {
    display: inline-flex;
    flex-direction: column;
    gap: var(--syn-spacing-large);
  }
</style>
```

---

## Quiet

Use the Quiet attribute to have a low emphasis variant of a Link. This can be used if the link should not attract too much attention.

```html
<a href="javascript:void(0)" class="syn-link syn-link--quiet">
  <syn-icon name="keyboard_arrow_right"></syn-icon>
  Silence is gold
</a>
```

---

## Disabled

Use the disabled attribute to disable a Link.

```html
<a class="syn-link syn-link--disabled">
  <syn-icon name="keyboard_arrow_right"></syn-icon>
  Disabled
</a>
```

---

## Focus

The focus event gives the user feedback that the Link has been focused by the keyboard interaction.

```html
<div style="padding: 5px">
  <a href="javascript:void(0)" class="syn-link syn-link--medium">
    <syn-icon name="keyboard_arrow_right"></syn-icon>
    Link
  </a>
</div>
```

---

## Size

Use the size attribute to change the Link size.

```html
<div style="display: flex; gap: var(--syn-spacing-large)">
  <a href="javascript:void(0)" class="syn-link syn-link--small">
    <syn-icon name="keyboard_arrow_right"></syn-icon>
    Small
  </a>
  <a href="javascript:void(0)" class="syn-link syn-link--medium">
    <syn-icon name="keyboard_arrow_right"></syn-icon>
    Medium
  </a>
  <a href="javascript:void(0)" class="syn-link syn-link--large">
    <syn-icon name="keyboard_arrow_right"></syn-icon>
    Large
  </a>
</div>
```
