Actions

Link

Text that goes somewhere, in the ink of its sentence.

On this page

A link is text that goes somewhere, written in the ink of its sentence. The interface is monochrome, so a link is marked by its underline instead of a hue: a quiet line at rest that takes the full ink under the pointer. Use .link on an <a>.

Link

PreviewCode

<p class="m(0) text-sm fg-text-body leading-md">Master UI reads Master CSS tokens. Start with the<a class="link" href="#installation">installation guide</a>, then read how the<a class="link" href="#theme">theme</a>is built.</p>

#Quiet

link-quiet takes the color around it and shows no line until touched. Use it where a row of links would otherwise rule the page: footers, metadata and navigation lists. It must still be recognizable as a link by its place or its wording.

Quiet

PreviewCode

<nav class="flex gap-md text-sm fg-text-muted" aria-label="Footer">  <a class="link link-quiet" href="#docs">Docs</a>  <a class="link link-quiet" href="#changelog">Changelog</a>  <a class="link link-quiet" href="#license">License</a></nav>

#New tab

A link with target="_blank" draws a small arrow that points out of its line, so leaving the page is not a surprise. The arrow is decoration: say "opens in a new tab" in the link's name or its text for those who cannot see it.

New tab

PreviewCode

<p class="m(0) text-sm fg-text-body leading-md">The corner shape follows the<a class="link" href="#spec" target="_blank" rel="noopener">CSS Borders specification  <span class="sr-only">(opens in a new tab)</span></a>.</p>

#Link or button

A link navigates and a button acts. For navigation that should look like a control, put btn on the <a>. For an action inside a sentence, such as "undo", put link on a <button type="button"> so it keeps a button's keys and semantics.

A button in a sentence

PreviewCode

<p class="m(0) text-sm fg-text-body">The project was archived.  <button type="button" class="link">Undo</button></p>

#Classes

Class	Description
`link`	An underlined link in strong ink; the line takes the full ink under the pointer
`link-quiet`	Inherits its color and shows no line until touched, for footers, metadata and navigation lists. With `link`

#Source

@master/ui/components/link.css

/* * Link: text that goes somewhere, in the ink of its sentence. * The underline is a quiet line at rest and takes the full ink under the pointer, so links read without a hue. */@layer components {  .link {    /* A button written as a link, for an action inside a sentence, drops the button's box. */    margin: 0;    padding: 0;    border: 0;    border-radius: 2px;    background: none;    font: inherit;    font-feature-settings: inherit;    appearance: none;    color: var(--color-text-strong);    text-decoration: underline;    text-decoration-color: var(--color-line-mark);    text-decoration-thickness: max(1px, .0625em);    text-underline-offset: .2em;    cursor: pointer;    transition: text-decoration-color var(--duration-quick) var(--easing-glide), color var(--duration-quick) var(--easing-glide);    @media (hover: hover) {      &:hover {        text-decoration-color: currentColor;      }    }    /* Pressed: the full line, as under the pointer, so a tap is answered too. */    &:active {      text-decoration-color: currentColor;    }    &:focus-visible {      @apply --focus-ring;    }    /* A link that opens a new tab points out of the line it is in. Say "opens in a new tab" in its name too. */    &[target="_blank"]::after {      content: '';      display: inline-block;      width: .6875em;      height: .6875em;      margin-inline-start: .1875em;      background: currentColor;      opacity: .6;      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5 7.5 2.5M3.5 2.5h4v4'/%3E%3C/svg%3E") center / contain no-repeat;    }    /* No line until touched, where a row of links would otherwise rule the page: footers, metadata, navigation. */    &.link-quiet {      color: inherit;      text-decoration-color: transparent;      @media (hover: hover) {        &:hover {          color: var(--color-text-strong);          text-decoration-color: var(--color-line-mark);        }      }    }    @media (forced-colors: active) {      color: LinkText;      text-decoration-color: currentColor;    }  }  /* A link that cannot be followed now: no destination is promised, so it loses its ink and its line. */  .link:is(:disabled, [aria-disabled="true"]) {    color: var(--color-text-disabled);    text-decoration-color: transparent;    cursor: not-allowed;  }}