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 Base Components 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-Button Link-Static Block-Link-Button Block-Link-Static Link-List
Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Text Label No
Demo Inline
Try it out on Storybook Show HTML
Inline Negative
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

The sbb-link component provides the same functionality as a native <a> enhanced with the SBB Design.

Slots

The text is provided via an unnamed slot.

<sbb-link value="help"> Help </sbb-link>

States

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>

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