Atlas

Text link

An inline anchor with an animated underline and optional icons that slide outwards on hover.

<x-atlas::text-link>

Use a text link where the destination belongs to the sentence around it. When the action is the point of the block rather than part of a sentence, reach for a button with an href instead.

See our pricing 
<x-atlas::text-link href="/pricing">See our pricing</x-atlas::text-link>
Preview follows the site's light/dark mode. Open standalone →

href defaults to #. That keeps the component renderable while you scaffold, but it also means a forgotten href silently jumps to the top of the page rather than failing — always pass one.

Icons

Icons work as they do on the button. Set :has-icon="true" for a chevron after the label, which reads as onward navigation, and add icon-position="left" for one before it, which reads as going back. When the link does something more specific, such as downloading a file, pass an icon instead; it turns the icon on by itself. On hover the icon slides away from the label, and the movement is skipped for readers who prefer reduced motion.

Continue Back to overview Download the brochure [email protected] 
<x-atlas::text-link href="/pricing" :has-icon="true">Continue</x-atlas::text-link>
<x-atlas::text-link href="/pricing" :has-icon="true" icon-position="left">Back to overview</x-atlas::text-link>
<x-atlas::text-link href="/brochure.pdf" icon="fas-download">Download the brochure</x-atlas::text-link>
<x-atlas::text-link href="mailto:[email protected]" icon="far-envelope" icon-position="left">[email protected]</x-atlas::text-link>
Preview follows the site's light/dark mode. Open standalone →

A left icon also flips the underline: it grows from the right, so the animation travels the same way the arrow points. Only names from the Atlas icon set resolve.

Colors

Body copy should stay on primary. The status colors exist so a link inside a success or error message can inherit that message's tone rather than fighting it. There is also a white color for links on a dark panel — omitted here because the preview is light.

Primary Secondary accent Black Info Success Warning Danger 
<x-atlas::text-link href="/pricing" color="primary">Primary</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="secondary">Secondary</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="accent">accent</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="black">Black</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="info">Info</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="success">Success</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="warning">Warning</x-atlas::text-link>
<x-atlas::text-link href="/pricing" color="danger">Danger</x-atlas::text-link>
Preview follows the site's light/dark mode. Open standalone →

Disabled

Anchors have no disabled attribute, so the component removes href altogether and adds role="link", aria-disabled="true" and tabindex="-1". The underline and icon animations stop with it. Note that this pulls the link out of the tab order entirely, which hides the state from keyboard users — if the reason it is unavailable matters, say so in adjacent text.

Available Not available yet 
<x-atlas::text-link href="/pricing" :has-icon="true">Available</x-atlas::text-link>
<x-atlas::text-link href="/pricing" :has-icon="true" disabled>Not available yet</x-atlas::text-link>
Preview follows the site's light/dark mode. Open standalone →

Inline in a sentence

The link is inline-flex, so it sits on the text baseline but will not wrap across two lines. Keep inline labels to a few words.

Orders ship within two working days. Read the shipping conditions or check our returns policy before you order. 

<p>
    Orders ship within two working days. Read the
    <x-atlas::text-link href="/shipping">shipping conditions</x-atlas::text-link>
    or check our
    <x-atlas::text-link href="/returns">returns policy</x-atlas::text-link>
    before you order.
</p>
Preview follows the site's light/dark mode. Open standalone →

Button

Buttons and link buttons, with sizes, variants, colors and icons that follow the attributes you set.

Icon

Renders an Atlas component icon or a Font Awesome icon, inline and sized against the surrounding text.

List

Bulleted, numbered, icon and inline lists, built either from an array of strings or from item children.

Reference

  • Name
    href
    Type
    string
    Default
    default: #
    Description
    Destination. Dropped entirely when disabled is set.
  • Name
    color
    Type
    primary | secondary | accent | black | white | info | success | warning | danger
    Default
    default: primary
    Description
    Which color token the label and underline draw from.
  • Name
    has-icon
    Type
    bool
    Default
    default: auto
    Description
    Whether to render an icon. On when icon is set; pass true for the chevron, false to hide it.
  • Name
    icon
    Type
    string
    Default
    default: —
    Description
    Icon name. Without one, the chevron pointing towards icon-position.
  • Name
    icon-position
    Type
    left | right
    Default
    default: right
    Description
    Which side of the label the icon sits on. On hover it slides away from the label.
  • Name
    disabled
    Type
    bool
    Default
    default: false
    Description
    Removes href and the hover animations, and applies role="link", aria-disabled="true" and tabindex="-1".

Slots

  • Name
    default
    Type
    slot
    Description
    The link label. Wrapped in a span so the underline animation can be positioned against it.