Ein Link ist ein interaktives Textelement, das Nutzenden zu einer anderen Seite oder Ressource navigiert.
Nummer | Typ | Beschreibung | Optional | Hinweis |
---|---|---|---|---|
1 | Text | Label | Nein |
The sbb-link
component provides the same functionality as a native <a>
enhanced with the SBB Design.
The text is provided via an unnamed slot.
<sbb-link value="help"> Help </sbb-link>
The component can be displayed in disabled
state using the self-named property.
<sbb-link href="https://www.sbb.ch" disabled>Refunds</sbb-link>
The component is internally rendered as a link,
accepting its associated properties (href
, target
, rel
and download
).
<sbb-link href="https://github.com/sbb-design-systems/lyne-components" target="_blank">
Travel-cards and tickets
</sbb-link>
Name | Attribute | Privacy | Type | Default | Description |
---|---|---|---|---|---|
accessibilityLabel | accessibility-label | public | string | undefined | This will be forwarded as aria-label to the inner anchor element. | |
disabled | disabled | public | boolean | false | Whether the component is disabled. |
download | download | public | boolean | undefined | Whether the browser will show the download dialog on click. | |
href | href | public | string | undefined | The href value you want to link to. | |
negative | negative | public | boolean | false | Negative coloring variant flag. |
rel | rel | public | string | undefined | The relationship of the linked URL as space-separated link types. | |
size | size | public | SbbLinkSize | 's' | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. |
target | target | public | LinkTargetType | string | undefined | Where to display the linked URL. |
Name | Description |
---|---|
Use the unnamed slot to add content to the sbb-link . |