Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Link Info

What does the component do?

A link is an interactive text element that navigates users to another page or resource.

When should the component be used?

  • To lead users to further content, pages or external resources.
  • To provide links to related information or documents.
  • To provide navigation within the website or application.

Rules

  • Use descriptive and meaningful link texts to help users understand the target content.
  • Links should open in a new tab if they lead to external resources.
Link-List
Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Text Label No
Demo Overview
Try it out on Storybook Show HTML
Button Link
Try it out on Storybook Show HTML
Static Link
Try it out on Storybook Show HTML
Slotted Icon
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

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).

Note: In contrast with other modules, each link component has its own entry point
(e.g. @sbb-esta/lyne-elements/link/link.js). This is due to the amount of button variants.

<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.

<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)).

<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.

<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.

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

Style

Block links have three sizes (xs, s, which is the default, and m).

<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>.

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

API Documentation

Properties

Name Attribute Privacy Type Default Description
disabled disabled public boolean false Whether the component is disabled.
disabledInteractive disabled-interactive public boolean false Whether the button should be aria-disabled but stay interactive.
form form public HTMLFormElement | null The <form> element to associate the button with.
iconName icon-name public string '' The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.
iconPlacement icon-placement public SbbIconPlacement 'start' Moves the icon to the end of the component if set to true.
name name public string Name of the form element. Will be read from name attribute.
size size public SbbLinkSize 's' / 'xs' (lean) Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used.
type type public SbbButtonType 'button' The type attribute to use for the button.
validationMessage - public string Returns the current error message, if available, which corresponds to the current validation state. Please note that only one message is returned at a time (e.g. if multiple validity states are invalid, only the chronologically first one is returned until it is fixed, at which point the next message might be returned, if it is still applicable). Also, a custom validity message (see below) has precedence over native validation messages.
validity - public ValidityState Returns the ValidityState object for this element.
value value public string '' Value of the form element.
willValidate - public boolean Returns true if this element will be validated when the form is submitted; false otherwise.

Methods

Name Privacy Description Parameters Return Inherited From
checkValidity public Returns true if this element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case. boolean SbbFormAssociatedMixin
reportValidity public Returns true if this element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user. boolean SbbFormAssociatedMixin
setCustomValidity public Sets the custom validity message for this element. Use the empty string to indicate that the element does not have a custom validity error. message: string void SbbFormAssociatedMixin

Slots

Name Description
Use the unnamed slot to add content to the sbb-block-link-button.
icon Slot used to display the icon, if one is set.

Properties

Name Attribute Privacy Type Default Description
accessibilityCurrent accessibility-current public string '' This will be forwarded as aria-current to the inner anchor element.
accessibilityLabel accessibility-label public string '' 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 false Whether the browser will show the download dialog on click.
href href public string '' The href value you want to link to.
iconName icon-name public string '' The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.
iconPlacement icon-placement public SbbIconPlacement 'start' Moves the icon to the end of the component if set to true.
rel rel public string '' The relationship of the linked URL as space-separated link types.
size size public SbbLinkSize 's' / 'xs' (lean) 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 '' Where to display the linked URL.

Slots

Name Description
Use the unnamed slot to add content to the sbb-block-link.
icon Slot used to display the icon, if one is set.

Properties

Name Attribute Privacy Type Default Description
disabled disabled public boolean false Whether the component is disabled.
iconName icon-name public string '' The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.
iconPlacement icon-placement public SbbIconPlacement 'start' Moves the icon to the end of the component if set to true.
size size public SbbLinkSize 's' / 'xs' (lean) Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used.

Slots

Name Description
Use the unnamed slot to add content to the sbb-block-link-static.
icon Slot used to display the icon, if one is set.

Properties

Name Attribute Privacy Type Default Description
disabled disabled public boolean false Whether the component is disabled.
disabledInteractive disabled-interactive public boolean false Whether the button should be aria-disabled but stay interactive.
form form public HTMLFormElement | null The <form> element to associate the button with.
name name public string Name of the form element. Will be read from name attribute.
negative negative public boolean false Negative coloring variant flag.
size size public SbbLinkSize 's' / 'xs' (lean) Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used.
type type public SbbButtonType 'button' The type attribute to use for the button.
validationMessage - public string Returns the current error message, if available, which corresponds to the current validation state. Please note that only one message is returned at a time (e.g. if multiple validity states are invalid, only the chronologically first one is returned until it is fixed, at which point the next message might be returned, if it is still applicable). Also, a custom validity message (see below) has precedence over native validation messages.
validity - public ValidityState Returns the ValidityState object for this element.
value value public string '' Value of the form element.
willValidate - public boolean Returns true if this element will be validated when the form is submitted; false otherwise.

Methods

Name Privacy Description Parameters Return Inherited From
checkValidity public Returns true if this element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case. boolean SbbFormAssociatedMixin
reportValidity public Returns true if this element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user. boolean SbbFormAssociatedMixin
setCustomValidity public Sets the custom validity message for this element. Use the empty string to indicate that the element does not have a custom validity error. message: string void SbbFormAssociatedMixin

Slots

Name Description
Use the unnamed slot to add content to the sbb-link-button.

Properties

Name Attribute Privacy Type Default Description
accessibilityCurrent accessibility-current public string '' This will be forwarded as aria-current to the inner anchor element.
accessibilityLabel accessibility-label public string '' 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 false Whether the browser will show the download dialog on click.
href href public string '' The href value you want to link to.
negative negative public boolean false Negative coloring variant flag.
rel rel public string '' The relationship of the linked URL as space-separated link types.
size size public SbbLinkSize 's' / 'xs' (lean) 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 '' Where to display the linked URL.

Slots

Name Description
Use the unnamed slot to add content to the sbb-link.

Properties

Name Attribute Privacy Type Default Description
disabled disabled public boolean false Whether the component is disabled.
negative negative public boolean false Negative coloring variant flag.
size size public SbbLinkSize 's' / 'xs' (lean) Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used.

Slots

Name Description
Use the unnamed slot to add content to the sbb-link-static.
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings