Standalone link
A standalone link is used to navigate users to another page, view, or resource. Unlike standard buttons that trigger an action, standalone links facilitate navigation within or outside the product.
<sl-link>
<a href="/dashboard">Student dashboard</a>
</sl-link>When to use
- Navigate to content within the application or website.
- Link to supporting information such as documentation, FAQs, help articles, or policy pages.
- Direct users to external websites or third-party resources.
When not to use
- Do not use a Standalone Link when the primary purpose is to perform an action rather than navigate. Standalone Links are intended for navigation to another page, view, or resource. If the interaction initiates an action, use a standard Button instead.
- Do not use a Standalone Link for inline links within running text or paragraphs; use global text link styling instead.
Link Types
Default internal link
The default internal link contains no icons and is used for navigating to destinations within the same product or ecosystem. This link always opens in the same tab.
Internal link with arrow on the right
Used similarly to the default internal link, but includes a right arrow icon to add emphasis or indicate moving forward in a process. This link always opens in the same tab.
Internal link with arrow on the left
Used similarly to the default internal link, but includes a left arrow icon to indicate moving back in a process. This link always opens in the same tab.
Internal link that opens in a new tab
Open in a new tab when users need to preserve their current context, such as during a workflow where supporting information is required.
External link
Use for destinations outside the product or organization domain. Always displays an external link icon and opens in a new tab.
Email link
Used for mailto: links. Always displays an envelope icon and triggers the user's default mail client.
Telephone link
Used for tel: links. Always displays a phone icon and triggers the device's calling application.
Variants
Each variant carries a specific semantic meaning, which in turn determines the correct color to use. Rather than specifying exact color values here, the corresponding color is defined by the design tokens — actual values can differ per product/theme.
- Primary — used for primary navigation / high emphasis.
- Secondary — used for secondary navigation / regular emphasis.
- Info — used for informative links, for example within an informative inline message.
- Success — used for positive links, for example within a positive inline message.
- Warning — used for cautionary links, for example within a caution inline message.
- Danger — used for negative links, for example within a negative inline message.
Fill
Available fill types: Solid, Outline, and Ghost. All fill types are available across every variant listed above.
- Solid: Filled background button style.
- Outline: Bordered, transparent background.
- Ghost: No border, text-only.
Shapes
This component is available in two shape variants to align with our ecosystem's product lines and screen contexts:
- Pill-shaped (
pill): Use this variant in student and parent products, and across all user groups (including teachers and administrators) on login and auth screens to create a friendly, welcoming entry experience. - Rectangular (
rect): Use this variant in information-dense products, dashboards, and data workflows for teachers and administrators to match the structured, professional grid layout.
Rule of thumb: Always match the shape of your standard buttons within the same screen.
Sizes
This component is available in three sizes to accommodate different layouts, hierarchy, and context:
- Small (
sm): Use in tight spaces, data-dense tables, grids, and compact UI components where actions need to be subtle and space-efficient. - Medium (
md): The default standard size. Use for everyday navigation, general workflows, and standard content sections. - Large (
lg): Use for prominent, high-priority entry points, such as login and auth screens, empty states, or main call-to-action areas requiring maximum visual impact and touch target size.
Icon Usage
| Situation | Icon |
|---|---|
| Standard internal navigation in the same tab | No icon |
| Internal navigation in the same tab, moving forward a step in a process or to add extra emphasis | |
| Internal navigation in the same tab, going back a step in a process | |
| Internal navigation in a new tab | |
| External navigation | |
Telephone (tel:) navigation | |
Email (mailto:) navigation |
Anatomy
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Container | Defines the clickable area of the standalone link. | no |
| 2 | Text label | Communicates the link's destination or purpose. | no |
| 3 | Icon end | Indicates the link's behavior or destination type. | yes |
| 4 | Arrow-left | Indicates if the user is going back a step in a process (only used for internal navigation in the same tab) | yes |
Content guidelines
- Use concise, descriptive labels.
- Avoid generic labels such as "Click here" or "Read more" without context.
- Ensure the destination is clear from the link text.
Related components
- Button: A button initiates actions that are performed without navigating the user away from their current page.
<sl-link fill="outline" variant="primary">
<a href="/courses">Course overview</a>
</sl-link>
<sl-link variant="secondary" shape="pill">
<a href="/study-plan">Study plan</a>
</sl-link>
<sl-link variant="success">
<a href="/calendar">Calendar</a>
</sl-link>API
API reference for configuring standalone links across common use cases.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
fill | fill | 'solid' | 'outline' | 'ghost' | undefined | 'solid' | The fill style of the link button. |
iconPosition | icon-position | 'start' | 'end' | undefined | 'end' | Position of the internal link indicator icon. |
noIcon | no-icon | boolean | undefined | No icon will be shown on internal links when this attribute is set. | |
shape | shape | 'rect' | 'pill' | undefined | 'rect' | The shape of the link button. |
size | size | 'sm' | 'md' | 'lg' | undefined | 'md' | The size of the link button. |
type | type | 'internal' | 'internal-new-tab' | 'external' | 'email' | 'tel' | undefined | undefined | Override the inferred link type. |
variant | variant | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | undefined | 'secondary' | The link's color variant. |
Slots
| Name | Description |
|---|---|
default | Place a single <a> element inside the component. |
CSS Parts
| Name | Description |
|---|---|
icon | The new-tab indicator icon. |
Content
Accessible applications depend not only on good code, but also on good copy. To keep links and their destinations clear for all users, follow these guidelines:
Avoid ambiguous names
Links with the same text should lead to the same destination. When similar links lead to different destinations, use enough distinguishing text to make each destination clear.
Concise Clarity
Link text should be brief, ideally 1 or 2 words, and at most 4 words with fewer than 20 characters, spaces included. Avoid punctuation like periods or exclamation points.
Target-Centric
Links should express their target, using verbs in their labels and a bare infinitive conjunction. This approach enhances clarity and user orientation.
Clear Outcomes
The link's label should unmistakably convey its destination. Ideally, the link text should match the destination page title.
Sentence Case
Always use sentence case for link text; capitalization should not be used for emphasis.
Mindful Tone
Links serve a functional purpose, so emojis and exclamation points should be left behind. Keep labels as plain text, free from extra punctuation or embellishments.
Difference between link and button
It's important for accessibility to use links and buttons in the right scenarios so assistive technology users know what to expect from each item. Use a link for navigation to another page, route, or resource. Use a button for actions performed on the current page, even when it requires opening a modal dialog. Do not use a standalone link as a button-like action if it does not navigate.
Links opening in new tab
Internal links that open in a new tab and external links have an additional icon at the end. This icon communicates the behavior to sighted users. For screen reader users, the component automatically adds visually hidden text that announces '(opens in a new tab)'.
Keyboard interactions
| Command | Description |
|---|---|
| Tab | Moves focus to next link. |
| Shift + Tab | Moves focus to previous link. |
| Enter | Activates the link. |
WAI-ARIA
In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningful value, because it relies on the context or way a component is used.
Attributes that we recommend you add in certain scenarios are mentioned below.
For this component we can't think of any common scenarios that require you to add specific attributes, but keep in mind that if you use images or icons that (partially) replace text you need to provide an alternative for assistive technology, by adding an alttext or aria-label as you normally would.