# Link

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: several elements that can be used on their own
- Categories: Action
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Related components

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

## Overview

### What does the component do?
A link is an interactive text element that leads to another page or resource. It is available as a block link, as an inline link and as a variant for buttons.

### When should the component be used?
* To guide users to further content, pages or external resources.
* To refer to related information or documents.

### Rules.
* Link texts are descriptive and meaningful. They make the target content understandable.
* A link navigates. For actions, use a [button](https://digital.sbb.ch/en/design-system/lyne/components/button/).
* Links to external resources open in a new tab.

## Implementation (web components)

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)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/link/api.md