Badge

Badges are inline elements used to label, categorize, or organize a list of items.

Examples

Chi includes three badge variants: Solid, Outline, and Flat. Use solid badges for high emphasis, base or outline badges for medium emphasis, and flat badges for low emphasis.

Base

BasePrimarySuccessWarningDangerDarkMuted
SecondaryLight
To display a badge, use the tag <chi-badge>. A contextual color (e.g. dark) can also be set to the color attribute to provide alternate styling.
<!-- For light backgrounds -->
<chi-badge>Base</chi-badge>
<chi-badge color="primary">Primary</chi-badge>
<chi-badge color="success">Success</chi-badge>
<chi-badge color="warning">Warning</chi-badge>
<chi-badge color="danger">Danger</chi-badge>
<chi-badge color="dark">Dark</chi-badge>
<chi-badge color="muted">Muted</chi-badge>
<!-- For dark backgrounds -->
<chi-badge color="secondary">Secondary</chi-badge>
<chi-badge color="light">Light</chi-badge>
To display a badge, use the class chi-badge. A contextual class (e.g. -dark) can also be applied to provide alternate styling.
<!-- For light backgrounds -->
<div class="chi-badge">
  <span>Base</span>
</div>
<div class="chi-badge -primary">
  <span>Primary</span>
</div>
<div class="chi-badge -success">
  <span>Success</span>
</div>
<div class="chi-badge -warning">
  <span>Warning</span>
</div>
<div class="chi-badge -danger">
  <span>Danger</span>
</div>
<div class="chi-badge -dark">
  <span>Dark</span>
</div>
<div class="chi-badge -muted">
  <span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="chi-badge -secondary">
  <span>Secondary</span>
</div>
<div class="chi-badge -light">
  <span>Light</span>
</div>

Outline

PrimarySuccessWarningDangerDarkMuted
SecondaryLight
To remove solid background and keep its colored border, set the variant attribute value to outline.
<!-- For light backgrounds -->
<chi-badge color="primary" variant="outline">Primary</chi-badge>
<chi-badge color="success" variant="outline">Success</chi-badge>
<chi-badge color="warning" variant="outline">Warning</chi-badge>
<chi-badge color="danger" variant="outline">Danger</chi-badge>
<chi-badge color="dark" variant="outline">Dark</chi-badge>
<chi-badge color="muted" variant="outline">Muted</chi-badge>
<!-- For dark backgrounds -->
<chi-badge color="secondary" variant="outline">Secondary</chi-badge>
<chi-badge color="light" variant="outline">Light</chi-badge>
To remove solid background and keep its colored border, apply the class -outline.
<!-- For light backgrounds -->
<div class="chi-badge -primary -outline">
  <span>Primary</span>
</div>
<div class="chi-badge -success -outline">
  <span>Success</span>
</div>
<div class="chi-badge -warning -outline">
  <span>Success</span>
</div>
<div class="chi-badge -danger -outline">
  <span>Danger</span>
</div>
<div class="chi-badge -dark -outline">
  <span>Dark</span>
</div>
<div class="chi-badge -muted -outline">
  <span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="chi-badge -secondary -outline">
  <span>Secondary</span>
</div>
<div class="chi-badge -light -outline">
  <span>Light</span>
</div>

Flat

PrimarySuccessWarningDangerDarkMuted
SecondaryLight
To render a badge without background and border, set the variant attribute value to flat.
<!-- For light backgrounds -->
<chi-badge color="primary" variant="flat">Primary</chi-badge>
<chi-badge color="success" variant="flat">Success</chi-badge>
<chi-badge color="warning" variant="flat">Warning</chi-badge>
<chi-badge color="danger" variant="flat">Danger</chi-badge>
<chi-badge color="dark" variant="flat">Dark</chi-badge>
<chi-badge color="muted" variant="flat">Muted</chi-badge>
<!-- For dark backgrounds -->
<chi-badge color="secondary" variant="flat">Secondary</chi-badge>
<chi-badge color="light" variant="flat">Light</chi-badge>
To render a badge without background and border, apply the class -flat.
<!-- For light backgrounds -->
<div class="chi-badge -primary -flat">
  <span>Primary</span>
</div>
<div class="chi-badge -success -flat">
  <span>Success</span>
</div>
<div class="chi-badge -warning -flat">
  <span>Warning</span>
</div>
<div class="chi-badge -danger -flat">
  <span>Danger</span>
</div>
<div class="chi-badge -dark -flat">
  <span>Dark</span>
</div>
<div class="chi-badge -muted -flat">
  <span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="chi-badge -secondary -flat">
  <span>Secondary</span>
</div>
<div class="chi-badge -light -flat">
  <span>Light</span>
</div>

Icon badges

Icons can be placed before, after, or on both sides of text.

BadgeBadgeActiveAwayDo not DisturbOffline
<chi-badge>
  <chi-icon icon="plus" size="xs"></chi-icon>
  <span>Badge</Badge>
</chi-badge>
<chi-badge>
  <span>Badge</Badge>
  <chi-icon icon="x" size="xs"></chi-icon>
</chi-badge>
<chi-badge variant="flat" color="success">
  <chi-icon icon="circle"></chi-icon>
  <span>Active</Badge>
</chi-badge>
<chi-badge variant="flat" color="warning">
  <chi-icon icon="circle-clock"></chi-icon>
  <span>Away</Badge>
</chi-badge>
<chi-badge variant="flat" color="danger">
  <chi-icon icon="circle-minus"></chi-icon>
  <span>Do not Disturb</Badge>
</chi-badge>
<chi-badge variant="flat" color="muted">
  <chi-icon icon="circle"></chi-icon>
  <span>Offline</Badge>
</chi-badge>
<div class="chi-badge">
  <div class="chi-badge__content">
    <i class="chi-icon -xs icon-plus"></i>
    <span>Badge</span>
  </div>
</div>
<div class="chi-badge">
  <div class="chi-badge__content">
    <span>Badge</span>
    <i class="chi-icon -xs icon-x"></i>
  </div>
</div>
<div class="chi-badge -flat -success">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle"></i>
    <span>Active</span>
  </div>
</div>
<div class="chi-badge -flat -warning">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle-clock"></i>
    <span>Away</span>
  </div>
</div>
<div class="chi-badge -flat -danger">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle-minus"></i>
    <span>Do not disturb</span>
  </div>
</div>
<div class="chi-badge -flat -muted">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle"></i>
    <span>Offline</span>
  </div>
</div>

Additional Sizes

Small

BadgeBadge
Set the attribute size to sm to render small badges.
<chi-badge size="sm">Badge</chi-badge>
<chi-badge size="sm" variant="flat">
  <chi-icon icon="atom"></chi-icon>
  <span>Badge</span>
</chi-badge>
Use the -sm modifier class to render small badges.
<div class="chi-badge -sm">
  <span>Badge</span>
</div>
<div class="chi-badge -flat -sm">
  <div class="chi-badge__content">
    <i class="chi-icon icon-atom"></i>
    <span>Badge</span>
  </div>
</div>

Extra small

BadgeBadge
Set the attribute size to xs to render even smaller badges.
<chi-badge size="xs">Badge</chi-badge>
<chi-badge size="xs" variant="flat">
  <chi-icon icon="atom"></chi-icon>
  <span>Badge</span>
</chi-badge>
Use the -xs modifier class to render even smaller badges.
<div class="chi-badge -xs">
  <span>Badge</span>
</div>
<div class="chi-badge -flat -xs">
  <div class="chi-badge__content">
    <i class="chi-icon icon-atom"></i>
    <span>Badge</span>
  </div>
</div>

Text Transform

BadgeBADGEbadge
Set the text-transform attribute to uppercase to render badges in uppercase, lowercase to render badges in lowercase and capitalized to render badges as capitalized.
<chi-badge text-transform="uppercase">Badge</chi-badge>
<chi-badge text-transform="lowercase">BADGE</chi-badge>
<chi-badge text-transform="capitalized">badge</chi-badge>
Use the -text--uppercase text utility class to render badges in all uppercase. -text--lowercase and -text--capitalized are also supported.
<div class="chi-badge -text--uppercase">
  <span>Badge</span>
</div>
<div class="chi-badge -text--lowercase">
  <span>Badge</span>
</div>
<div class="chi-badge -text--capitalized">
  <span>Badge</span>
</div>

Web Component

Properties

Property
Attribute
Description
Type
Default
color
color
to set color of a badge { primary, success, warning, danger, dark, muted, secondary, light }.
string
undefined
size
size
to set size of a badge { xs or sm }.
string
undefined
textTransform
text-transform
to transform the badge text { uppercase, lowercase, capitalized }.
string
undefined
variant
variant
to set variant of a badge { outline, flat }.
string
undefined

Accessibility

Accessibility guidelines coming soon