Solaris Design System


Links are <a> tags that are used to bring the user to a different page.

Standalone links are on their own, so it is not in a <p> tag where it is wrapped around other texts.

Inline links are in a <p> tag and is within a body of text.

Font size is 16px.

States Standalone
Can have icon
Is not underlined
No icons
Is always underlined
:enabled Enabled link standalone theme light Enabled link standalone theme dark Enabled link inline theme light Enabled link inline theme dark
:hover Hover link standalone theme light Hover link standalone theme dark Hover link inline theme light Hover link inline theme dark
:focus Focus link standalone theme light Focus link standalone theme dark Focus link inline theme light Focus link inline theme dark
:visited Visited link standalone theme light Visited link standalone theme dark Visited link inline theme light Visited link inline theme dark
:disabled Disabled link standalone theme light Disabled link standalone theme dark Disabled link inline theme light Disabled link inline theme dark
Same margin rules as a button
Icon-link standalone theme light Icon-link standalone theme dark  


Links are used as navigational elements, that allows users to go from one place to another on the application/site.

They can standalone or be within a sentence or a paragraph.

Links should be used sparingly to prevent clutter on a page and making it difficult for users to identify their next tseps.

When to use Navigate to a different page Navigate to a different site Jump to a section on the current page they are on Link to emails, phone numbers or external site

When not to use Use a button instead if the qction requires change of data or maniplation on how something should be displayed such as change of state, triggering an action.

Type Use
Standalone Used on their own without following content. Does not require underlines.
Inline Used in a sentence or body text. These links should be underlined to represent a clickable link.