# Link

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: mehrere eigenständige Elemente
- Kategorien: Action
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/link/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-link--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/link/overview (API: https://lyne-angular.app.sbb.ch/angular/components/link/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-34
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/link

## Elemente

- `sbb-block-link` (auch als `sbb-block-link-button`, `sbb-block-link-static`): It displays a link enhanced with the SBB Design.
- `sbb-link` (auch als `sbb-link-button`, `sbb-link-static`): It displays a link enhanced with the SBB Design.

## Verwandte Komponenten

- Ähnlich: [Button](https://digital.sbb.ch/de/design-system/lyne/components/button/index.md)

## Übersicht

### Was macht die Komponente?
Ein Link ist ein interaktives Textelement, das zu einer anderen Seite oder Ressource führt. Es gibt ihn als Block-Link, als Link im Fliesstext und als Variante für Buttons.

### Wann soll die Komponente eingesetzt werden?
* Um Nutzende zu weiteren Inhalten, Seiten oder externen Ressourcen zu führen.
* Um auf verwandte Informationen oder Dokumente zu verweisen.

### Regeln.
* Link-Texte sind beschreibend und aussagekräftig. Sie machen den Zielinhalt verständlich.
* Ein Link navigiert. Für Aktionen wird ein [Button](https://digital.sbb.ch/de/design-system/lyne/components/button/) verwendet.
* Links zu externen Ressourcen werden in einem neuen Tab geöffnet.

## Implementation (Web Components, Englisch)

The link components from Lyne provide the same functionality as a native `anchor (a)` element
enhanced with SBB Design, accepting its associated properties (`href`, `target`, `rel` and `download`).

```html
<sbb-link href="http://www.sbb.ch">Link text</sbb-link>
<sbb-block-link href="http://www.sbb.ch">Link text</sbb-block-link>
```

For every variant there is also a button version, equivalent to a native `button` element.

```html
<sbb-link-button href="http://www.sbb.ch">Link text</sbb-link-button>
<sbb-block-link-button href="http://www.sbb.ch">Link text</sbb-block-link-button>
```

Additionally, for every variant there is a static version that can be used inside another
interactive element (e.g. an `anchor (a)`).

```html
<sbb-link-static href="http://www.sbb.ch">Link text</sbb-link-static>
<sbb-block-link-static href="http://www.sbb.ch">Link text</sbb-block-link-static>
```

Block links can optionally display an icon, which can be provided via the `iconName` property
or via custom content using the `icon` slot.

```html
<sbb-block-link href="https://www.sbb.ch" icon-name="chevron-small-right-small">
  Help
</sbb-block-link>

<sbb-block-link
  href="https://www.sbb.ch"
  icon-name="chevron-small-left-small"
  icon-placement="start"
>
  Contact
</sbb-block-link>
```

### States

The component can be displayed in `disabled` state using the corresponding property.

```html
<sbb-link href="https://www.sbb.ch" disabled>Refunds</sbb-link>
```

### Style

Block links have three sizes (`xs`, `s` and `m`).

```html
<sbb-block-link href="https://www.sbb.ch" size="m">Refunds</sbb-block-link>
```

#### Active state

To show a currently active link, the CSS class `sbb-active` can be placed on the `<sbb-block-link>`.
One possible use case would be to use it within the `<sbb-sidebar>`.

```html
<sbb-block-link class="sbb-active" accessibility-current="page">Refunds</sbb-block-link>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/link/api.md