Atlas

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.

<x-atlas::badge>

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

Colors

Pick the color for what the status means, not for how it looks. The full set of color tokens is available, though most badges stick to a handful.

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

Variants

The same three weights the button uses. solid is the strongest statement, outlined steps back, and ghost carries the color only in the text.

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

Sizes

Three sizes control padding and type scale. Use sm for inline labels that should not push surrounding text apart.

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

Actionable badges

Render a button or anchor when the badge is something you can act on, so it is focusable and announced correctly. An href or download forces an anchor; a type forces a button.

Link badge 
<x-atlas::badge tag="a" href="/components">Link badge</x-atlas::badge>
<x-atlas::badge tag="button" type="button">Button badge</x-atlas::badge>
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.

Pill filter

A toggleable filter chip. Outlined when off, filled with a remove icon when on.

Reference

<x-atlas::badge>

  • Name
    tag
    Type
    span | button | a
    Default
    default: span
    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 badge.
  • Name
    color
    Type
    primary | secondary | accent | black | white | info | success | warning | danger
    Default
    default: primary
    Description
    Which color tokens the badge draws from.
  • Name
    size
    Type
    sm | base | lg
    Default
    default: base
    Description
    Padding and type scale.
  • Name
    disabled
    Type
    bool
    Default
    default: false
    Description
    Disables the badge. On a button it sets the disabled attribute; on an anchor it sets aria-disabled.

Slots

  • Name
    default
    Type
    slot
    Description
    The badge label.