Link

Overview

A link navigates; a button acts. The base link carries navigation inside text: accent ink with an underline in the same colour. On hover the ink shifts to a clearly deeper tone and the underline strengthens. Object, contact and back links change the resting emphasis to match their navigation context.

Usage

• Navigate without changing dataA link moves to another view, record, document, anchor, or external protocol. Use a button when the primary result is an operation.
• Match the variant to the destinationUse Prose link within a sentence, Object link when the visible object name is the destination, Contact link for telephone or email, and Backlink for a parent or preceding view.
• Write destination-led textThe label identifies where the link goes. Avoid generic labels that hide the destination or describe an unrelated implementation detail.

Variants

A link inherits the surrounding type rather than carrying a size tier. Choose the variant by the kind of destination and the role the linked text plays.

States

Every state below is the real component wearing that state, not a picture of it. The columns share one set of kinds so a state can be read across them.

• Rest preserves each variant's roleProse and Contact links use accent ink, Object link uses full ordinary ink with the outline open mark, and Backlink uses its arrow instead of a resting underline.
• Hover strengthens navigation intentThe text and icon move to a visibly deeper accent, and every visible underline becomes 2px in the link's current colour.
• Keyboard focus uses one shared outlineThe standard 2px camel ring hugs the linked words without changing the variant's resting treatment.

Object link

.mk-object-link is an object's visible name serving as its destination. It reads in full ordinary ink with an underline and the outline open icon. Text and icon take the deeper accent together on intent.

• The name is verbatimThe link text is the object's own name, and it wraps rather than truncates.
• The open mark is part of the variantThe unfilled diagonal arrow follows the name, inherits its colour, and changes with the same hover state.
• The link owns only the nameIf an entire tile should open, use the Card target behavior. The container — not this link variant — owns that larger hit area.

Contact link

.mk-contact-link acts on a contact fact: press a telephone number and the call starts, press an email and a draft opens. It keeps the accent at rest and gains the stronger, darker hover treatment because it hands navigation to an external protocol.

• The kind's icon-factThe registry's phone or message mark, muted, outside the link — it names the kind so the value needs no caption, and pressing the icon does not accidentally dial.
• The value verbatimThe number in its international shape, the email as written. No "Phone:", no "Email:" — the icon is the caption.
• Real protocolshref="tel:" and href="mailto:" — the OS routes them; no click handlers pretending to.
• Values do not wrapA number breaks badly mid-digit; the row wraps around the value instead.

Backlink

.mk-backlink is the quiet route to a preceding or parent view. Its arrow supplies the directional cue, so the resting state needs no underline.

• One per viewPlace it before the title or primary content.
• A short directionUse “Go back” or the concise name of the parent destination.
• A real anchor to a real URLThe route survives a shared link, reload and new tab.
• Rest and hoverAccent with no underline — the arrow already marks it; hover underlines.

Do and don't

Copy

• Link the name, not the verbThe linked words are the destination's own name — full description, never click here or a lone here.
• ShortA few words. A whole linked sentence underlines itself into noise.
• Names and values verbatimAn object link is the object's own name; a contact link is the number or address as written. Nothing prepended, nothing paraphrased.
• The backlink states directionUse “Go back” or the concise parent name.

Accessibility

• A real anchorAn <a href>, so it opens in a new tab on request and shows in the links list — never a span with a handler.
• Marked without colourThe base link's resting underline, the object link's quiet rule, the backlink's arrow, the contact link's protocol context — every kind survives monochrome.
• The external mark speaksVisible arrow, and the words "opens in a new tab" for the screen reader.
• The surrounding row carries the target floorA text link is not padded into a button box; its line or row supplies the touch height.

When to reach for something else

• It does somethingUse Button. Acting dressed as moving breaks the reader's model of what a press costs.
• The whole tile navigatesUse Card — its container owns the full-tile target while the visible object link continues to name the destination.
• The row acts instead of navigatingUse Row action.

Markup

<!-- in prose -->
Open the <a class="mk-link" href="/destination">full description</a>.

<!-- leaving the page -->
<a class="mk-link" href="…" target="_blank" rel="noopener">
  external link
  <svg data-mk-icon="external" aria-hidden="true"></svg><span class="mk-sr-only"> (opens in a new tab)</span>
</a>

<!-- an object's name -->
<a class="mk-object-link" href="/objects/123">
  Object name<svg class="mk-object-link-mark" data-mk-icon="open" aria-hidden="true"></svg>
</a>

<!-- a contact fact, inside its icon-fact -->
<span class="fact-row">
  <svg data-mk-icon="phone" aria-hidden="true"></svg>
  <a class="mk-contact-link" href="tel:+96890000000">+968 9 000 0000</a>
</span>

<!-- the way up, above the page title -->
<a class="mk-backlink" href="/parent">← Go back</a>
<h1>Page title</h1>