Skip to main content

Link

Links take the user to another screen, or to a specific part of the current screen.

Examples

Use class="ts-text-link" to apply the default Teamshares Design System link style to text. For link text on a dark background, use ts-text-link-light.

Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
<div class="ts-body-1">
  Teamshares is an <a href="#" class="ts-text-link">employee ownership platform</a> for small business, driven by
  proprietary software, education, and financial products.
</div>
<div class="dark-background">
  <div class="ts-body-1 ts-text-light">
    Teamshares is an <a href="#" class="ts-text-link-light">employee ownership platform</a> for small business, driven
    by proprietary software, education, and financial products.
  </div>
</div>
.ts-body-1
  | Teamshares is an
  a.ts-text-link href="#"
    | employee ownership platform
  | for small business, driven by proprietary software, education, and financial products.

.dark-background
  .ts-body-1.ts-text-light
    | Teamshares is an
    a.ts-text-link-light href="#"
      | employee ownership platform
    | for small business, driven by proprietary software, education, and financial products.

For text link styling: Use variant="text" on sl-button to display a low-emphasis plain text button. Note that text buttons have no backgrounds, borders, or padding.

To render a hypertext link with <sl-button>: Set the href attribute on sl-button to make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.

See Button for full sl-button specs.

Download statement

Open statement
<sl-button variant="text" size="small" href="/assets/images/wordmark.svg" download="shoelace.svg">
  <sl-icon slot="prefix" library="fa" name="arrow-down-to-bracket"></sl-icon>
  Download statement</sl-button>
<br/>
<br/>
<sl-button variant="text" size="medium" href="https://example.com/" target="_blank">Open statement
  <sl-icon slot="suffix" library="fa" name="arrow-up-right-from-square"></sl-icon>
</sl-button>
sl-button variant="text" size="small" href="/assets/images/wordmark.svg" download="shoelace.svg"
  sl-icon slot="prefix" library="fa" name="arrow-down-to-bracket"
  | Text
br
br
sl-button variant="text" size="medium" href="https://example.com/" target="_blank"
  | Text
  sl-icon slot="suffix" library="fa" name="arrow-up-right-from-square"

Usage

When to Use the Default Link Style vs the Text Button

  • Use the default link style for inline links that appear within a sentence or paragraph. The visible underline helps to differentiate the link text from the plain text.

  • Use the text button for stand-alone text, when the context and label alone make it clear that the text is interactive.