Skip to content
Status

Status

Every component, with its variants, sizes and states. Change the appearance here and every sample follows.

Badge

A status. The dot is a second channel, so the colour is never the only signal.

Tones

Packing
Neutral
Paid
Success
Pending
Warning
Refunded
Danger
Shipped
Information
Archived
Muted
<span class="or-badge or-badge--success">
  <span class="or-badge__dot"></span>
  Paid
</span>
<span className="or-badge or-badge--success">
  <span className="or-badge__dot" />
  Paid
</span>
<span class="or-badge or-badge--success">
  <span class="or-badge__dot"></span>
  Paid
</span>
<span className="or-badge or-badge--success">
  <span className="or-badge__dot" />
  Paid
</span>
<span class="or-badge or-badge--success">
  <span class="or-badge__dot"></span>
  Paid
</span>

Change

Up, down, or nothing to compare with. Never "+100%" from zero.

Variants

+12.4%
Up
-3.1%
Down
no comparison
No comparison
<span class="or-delta or-delta--up">
  <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-trending-up"></use></svg>
  +12.4%
</span>
<span className="or-delta or-delta--up">
  <Icon name="trending-up" size={16} />
  +12.4%
</span>
<span class="or-delta or-delta--up">
  <Icon name="trending-up" :size="16" />
  +12.4%
</span>
<span className="or-delta or-delta--up">
  <Icon name="trending-up" size={16} />
  +12.4%
</span>
<span class="or-delta or-delta--up">
  <Icon name="trending-up" :size="16" />
  +12.4%
</span>

Avatar

Initials on a palette colour. A person keeps the same avatar in every theme.

Colours

MO
Cream
TR
Sunset
ID
Mustard
KM
Cactus
LV
Sky
SH
Rose

Sizes

LV
Small
LV
Regular
LV
Large
<!-- Initials, never a photograph: a face is a licence problem and a request. -->
<span class="or-avatar or-avatar--sky or-avatar--lg">LV</span>
{/* Initials, never a photograph: a face is a licence problem and a request. */}
<span className="or-avatar or-avatar--sky or-avatar--lg">LV</span>
<!-- Initials, never a photograph: a face is a licence problem and a request. -->
<span class="or-avatar or-avatar--sky or-avatar--lg">LV</span>
{/* Initials, never a photograph: a face is a licence problem and a request. */}
<span className="or-avatar or-avatar--sky or-avatar--lg">LV</span>
<!-- Initials, never a photograph: a face is a licence problem and a request. -->
<span class="or-avatar or-avatar--sky or-avatar--lg">LV</span>

Tag

A chosen value that can be removed on its own.

States

Gifts
Enabled
Gifts
Focus
<span class="or-tag">
  Gifts
  <button type="button" aria-label="Remove Gifts">
    <svg class="or-i or-i-16" aria-hidden="true"><use href="#or-i-x"></use></svg>
  </button>
</span>
<span className="or-tag">
  Gifts
  <button type="button" aria-label="Remove Gifts">
    <Icon name="x" size={16} />
  </button>
</span>
<span class="or-tag">
  Gifts
  <button type="button" aria-label="Remove Gifts">
    <Icon name="x" :size="16" />
  </button>
</span>
<span className="or-tag">
  Gifts
  <button type="button" aria-label="Remove Gifts">
    <Icon name="x" size={16} />
  </button>
</span>
<span class="or-tag">
  Gifts
  <button type="button" aria-label="Remove Gifts">
    <Icon name="x" :size="16" />
  </button>
</span>