Link

⌘

Hyperlinks between pages

Overview

Links are used as navigational elements and can be used on their own or inline with text. They provide a lightweight option for navigation but like other interactive elements, too many links will clutter a page and make it difficult for users to identify their next steps.

Default

This is a text link This is an external text link

<a href="#">This is a text link</a>
<a href="https://github.com" target="_blank">This is an external text link</a>

Understated

This is a text link This is an underlined text link

<a href="#" className="text-current">This is a text link</a>
<a href="#" className="text-current underline hover:no-underline">This is an underlined text link</a>

Blended

Blended links work well with themed components

<div className="note p-4 bg-white dark:bg-gray-800">
  <a href="#" className="text-current underline hover:no-underline">Blended links</a> work well with themed components
</div>