Usage
When to use
- To navigate to a new destination, either internally or externally.
- As a standalone element or within a Button Set.
When not to use
- Within a body of text, consider Inline Link.
- To trigger an action or event, like a form submission, consider Button.
Size
We recommend using a medium size, but use whichever size fits best in the UI. For example, don’t use large links in tables.
Color
Primary
We recommend using the primary variant as the default and for more important links.
For example, when navigating the user to “View clusters”:
Secondary
Use the Secondary variant for less important links, when the primary color can’t be used, or when creating a list of links.
For example, on an install page, when navigating the user to “Learn more about Vault”:
Icon position
A Standalone Link can include a leading or trailing icon. Avoid creating links with both leading and trailing icons.
Leading
In most cases, use leading icons. Choose icons that add meaning and clarity to the action described in the link’s text.
Consider directionality; if directing the user backward in a flow, use the leading position.
Always use the leading position for product or service icons (e.g., GitLab).
Trailing
Consider trailing icons when there’s no other meaningful icon or when guiding the user forward through the product.
- Use
arrow-rightfor internal links. - Use
learn-linkfor links to tutorials. - Use
docs-linkfor links to documentation or installation guides. - Use
external-linkfor external links.
Don’t put product or service icons in the trailing position.
To learn more about icon best practices, review our Icon usage guidelines.
Spacing between links
Vertical list
We recommend at least 8px between Standalone Links when placed in a horizontal list.
Don't stack Standalone Links without any space between them. This creates a cluttered visual and requires precise mouse interaction that may not make for an inclusive experience.
Horizontal list
We recommend at least 16px between Standalone Links when placed in a horizontal list.
Common patterns
Within Button Sets
Standalone Links often appear in Button Sets.
The Standalone Link renders an HTML anchor element <a> that points to a URL, set with the href attribute.
How to use this component
The most basic invocation requires text and a link: write the text inside the tag and set the href attribute. The icon is arrow-right unless you set the icon attribute.
<i80-link-standalone href="https://design.i80.dk/" icon="film">Watch tutorial video</i80-link-standalone>Icon position
By default the icon is placed before the text. If you would like to position it after the text, set icon-position to trailing.
<i80-link-standalone href="https://design.i80.dk/" icon="film" icon-position="trailing">Watch tutorial video</i80-link-standalone>Color
There are two available colors for a Standalone Link: primary and secondary. The default is primary. To use the other option, set the color attribute to secondary.
<i80-link-standalone color="secondary" href="https://design.i80.dk/" icon="collections">Read tutorial</i80-link-standalone>Size
There are three sizes available: small, medium, and large. The default is medium. To use a different size, set a value for the size attribute:
<i80-link-standalone href="https://design.i80.dk/" icon="collections" size="small">Read tutorial</i80-link-standalone>
<i80-link-standalone href="https://design.i80.dk/" icon="collections" size="large">Read tutorial</i80-link-standalone>External links
To generate an <a> link, set href to a URL. href on its own makes an ordinary link; add the external attribute when the link should open in a new tab, which applies the target="_blank" and rel="noopener noreferrer" attributes to the <a> element.
<i80-link-standalone href="https://i80.dk" icon="layers">Request a demo</i80-link-standalone>Attributes
<i80-link-standalone> renders this component. Everything it understands:
| Attribute | Values | Default | Notes |
|---|---|---|---|
href, external |
|||
color |
primary · secondary | primary |
|
icon, icon-position |
standalone: arrow-right, leading · inline: trailing |
||
size (standalone) |
small · medium · large | medium |
The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.
Anatomy
| Element | Usage |
|---|---|
| Leading Icon* | Optional |
| Text | Required |
| Trailing Icon* | Optional |
| Focus Ring | Focus state only |
*A Standalone Link should always include an icon
States
Primary
Secondary
General recommendations
Use language consistently within each product (e.g., if “Edit” is used on one page, use that same convention throughout, instead of a similar word such as "Change").
Highlight the most relevant word or short phrase as it relates to the target of the link. For example:
Learn more about deploying a Vault Cluster on HCP
Don’t wrap an entire sentence or text block in a link.
Conformance rating
When used as recommended, there should not be any WCAG conformance issues with this component.
Best Practices
Annotations in design
Include annotations of the non-visual experience in your handoff notes. For example:
Interactive transitions
The only transition on a standalone link is the underline fading in on hover — a color change, not motion, so it is safe for people who have asked for reduced motion. Nothing moves.
Applicable WCAG Success Criteria
This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
-
1.3.1
Info and Relationships (Level A):
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. -
1.4.1
Use of Color (Level A):
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. -
2.1.1
Keyboard (Level A):
All functionality of the content is operable through a keyboard interface. -
2.4.7
Focus Visible (Level AA):
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
0.1.0
Første i80-version (fork af upstream, se core/UPSTREAM.md).
