Atlas

Button

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

<x-atlas::button> 

<x-atlas::button>Save changes</x-atlas::button>
Preview follows the site's light/dark mode. Open standalone →

Variants

Use solid for the one action you want taken on a screen, outline for the alternatives, and ghost where a button would otherwise crowd the layout. 

<x-atlas::button variant="solid">Solid</x-atlas::button>
<x-atlas::button variant="outlined">Outline</x-atlas::button>
<x-atlas::button variant="ghost">Ghost</x-atlas::button>
Preview follows the site's light/dark mode. Open standalone →

Colors

Colors are token sets rather than fixed values, so restyling a theme reaches every button at once. See theming for which tokens each color reads. 

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

Sizes 

<x-atlas::button size="sm">Small</x-atlas::button>
<x-atlas::button size="base">Base</x-atlas::button>
<x-atlas::button size="lg">Large</x-atlas::button>
Preview follows the site's light/dark mode. Open standalone →

Icons

Buttons have no icon by default. Pass an icon to add one, or set :has-icon="true" for the default chevron, and use icon-position="left" to move it to the other side. Use square for an icon-only button — it implies an icon, and the slot becomes the accessible name rather than disappearing. 

<x-atlas::button :has-icon="true">With icon</x-atlas::button>
<x-atlas::button icon-position="left" icon="fas-angle-left">Icon on the left</x-atlas::button>
<x-atlas::button>No icon (default)</x-atlas::button>
<x-atlas::button square icon="fas-xmark">Dismiss</x-atlas::button>
Preview follows the site's light/dark mode. Open standalone →

An href renders an anchor instead of a button, and once has-icon is set the icon follows the destination: a download gets the download icon, target="_blank" gets the external-link icon, and an in-page anchor gets the chevron.

Disabled

Buttons receive the disabled attribute. Anchors cannot be disabled, so they receive aria-disabled instead and stay in the tab order.

Disabled link 
<x-atlas::button disabled>Disabled button</x-atlas::button>
<x-atlas::button href="/components" disabled>Disabled link</x-atlas::button>
Preview follows the site's light/dark mode. Open standalone →

Badge

Short status labels in three sizes and weights. Renders as a span, or as a button or link when it needs to be actionable.

Text link

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

Reference

<x-atlas::button>

  • Name
    tag
    Type
    string
    Default
    default: button
    Description
    Element to render. Overridden automatically: an href or download attribute forces an anchor, a type attribute forces a button.
  • Name
    variant
    Type
    solid | outlined | ghost
    Default
    default: solid
    Description
    Visual weight of the button.
  • Name
    color
    Type
    primary | secondary | accent | black | white | info | success | warning | danger
    Default
    default: primary
    Description
    Which color tokens the button draws from.
  • Name
    size
    Type
    sm | base | lg
    Default
    default: base
    Description
    Padding and type scale.
  • Name
    has-icon
    Type
    bool
    Default
    default: auto
    Description
    Whether to render an icon. On when icon or square is set; pass true for the icon picked from the destination, false to hide it.
  • Name
    icon
    Type
    string
    Default
    default: —
    Description
    Icon name. Without one, downloads, external links and in-page anchors get their own icon and anything else the right chevron.
  • Name
    icon-position
    Type
    left | right
    Default
    default: right
    Description
    Which side of the label the icon sits on.
  • Name
    square
    Type
    bool
    Default
    default: false
    Description
    Renders an icon-only button, which implies has-icon; the slot becomes its accessible name.
  • Name
    disabled
    Type
    bool
    Default
    default: false
    Description
    Disables the button, or marks an anchor aria-disabled since anchors cannot be disabled.

Slots

  • Name
    default
    Type
    slot
    Description
    The button label. Kept for screen readers when square is set.