Badge
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.
Solid #
To display a badge, use the tag
<chi-badge>
. A contextual color (e.g. primary
) can be defined on 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>
<chi-badge color="accent-1">Accent-1</chi-badge>
<chi-badge color="accent-2">Accent-2</chi-badge>
<chi-badge color="accent-3">Accent-3</chi-badge>
<chi-badge color="accent-4">Accent-4</chi-badge>
<chi-badge color="accent-5">Accent-5</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. -primary
) can 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>
<div class="chi-badge -accent-1">
<span>Accent-1</span>
</div>
<div class="chi-badge -accent-2">
<span>Accent-2</span>
</div>
<div class="chi-badge -accent-3">
<span>Accent-3</span>
</div>
<div class="chi-badge -accent-4">
<span>Accent-4</span>
</div>
<div class="chi-badge -accent-5">
<span>Accent-5</span>
</div>
<!-- For dark backgrounds -->
<div class="chi-badge -secondary">
<span>Secondary</span>
</div>
<div class="chi-badge -light">
<span>Light</span>
</div>
Outline #
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>
<chi-badge color="accent-1" variant="outline">Accent-1</chi-badge>
<chi-badge color="accent-2" variant="outline">Accent-2</chi-badge>
<chi-badge color="accent-3" variant="outline">Accent-3</chi-badge>
<chi-badge color="accent-4" variant="outline">Accent-4</chi-badge>
<chi-badge color="accent-5" variant="outline">Accent-5</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>
<div class="chi-badge -accent-1 -outline">
<span>Accent-1</span>
</div>
<div class="chi-badge -accent-2 -outline">
<span>Accent-2</span>
</div>
<div class="chi-badge -accent-3 -outline">
<span>Accent-3</span>
</div>
<div class="chi-badge -accent-4 -outline">
<span>Accent-4</span>
</div>
<div class="chi-badge -accent-5 -outline">
<span>Accent-5</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 #
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>
<chi-badge color="accent-1" variant="flat">Accent-1</chi-badge>
<chi-badge color="accent-2" variant="flat">Accent-2</chi-badge>
<chi-badge color="accent-3" variant="flat">Accent-3</chi-badge>
<chi-badge color="accent-4" variant="flat">Accent-4</chi-badge>
<chi-badge color="accent-5" variant="flat">Accent-5</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>
<div class="chi-badge -accent-1 -flat">
<span>Accent-1</span>
</div>
<div class="chi-badge -accent-2 -flat">
<span>Accent-2</span>
</div>
<div class="chi-badge -accent-3 -flat">
<span>Accent-3</span>
</div>
<div class="chi-badge -accent-4 -flat">
<span>Accent-4</span>
</div>
<div class="chi-badge -accent-5 -flat">
<span>Accent-5</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 #
<chi-badge>
<chi-icon icon="plus" size="xs"></chi-icon>
<span>Badge</span>
</chi-badge>
<chi-badge>
<span>Badge</span>
<chi-icon icon="x" size="xs"></chi-icon>
</chi-badge>
<chi-badge variant="flat" color="success">
<chi-icon icon="circle"></chi-icon>
<span>Active</span>
</chi-badge>
<chi-badge variant="flat" color="warning">
<chi-icon icon="circle-clock"></chi-icon>
<span>Away</span>
</chi-badge>
<chi-badge variant="flat" color="danger">
<chi-icon icon="circle-minus"></chi-icon>
<span>Do not Disturb</span>
</chi-badge>
<chi-badge variant="flat" color="muted">
<chi-icon icon="circle"></chi-icon>
<span>Offline</span>
</chi-badge>
<div class="chi-badge">
<div class="chi-badge__content">
<i class="chi-icon -xs icon-plus" aria-hidden="true"></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" aria-hidden="true"></i>
</div>
</div>
<div class="chi-badge -flat -success">
<div class="chi-badge__content">
<i class="chi-icon icon-circle" aria-hidden="true"></i>
<span>Active</span>
</div>
</div>
<div class="chi-badge -flat -warning">
<div class="chi-badge__content">
<i class="chi-icon icon-circle-clock" aria-hidden="true"></i>
<span>Away</span>
</div>
</div>
<div class="chi-badge -flat -danger">
<div class="chi-badge__content">
<i class="chi-icon icon-circle-minus" aria-hidden="true"></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" aria-hidden="true"></i>
<span>Offline</span>
</div>
</div>
Additional Sizes
Small #
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" aria-hidden="true"></i>
<span>Badge</span>
</div>
</div>
Extra small #
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" aria-hidden="true"></i>
<span>Badge</span>
</div>
</div>
Text transform #
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>
Text weight #
Set
text-weight
to normal
to render badges in a normal font-weight, semi-bold
to render badges in a semi-bold font-weight and bold
to render badges in a bold font-weight.<chi-badge text-weight="normal">Badge</chi-badge>
<chi-badge text-weight="semi-bold">Badge</chi-badge>
<chi-badge text-weight="bold">Badge</chi-badge>
Use the
-text--normal
text utility class to render badges in a normal font-weight, -text--semi-bold
to render badges in a semi-bold font-weight -text--bold
to render badges in a bold font-weight.<div class="chi-badge -text--normal">
<span>Badge</span>
</div>
<div class="chi-badge -text--semi-bold">
<span>Badge</span>
</div>
<div class="chi-badge -text--bold">
<span>Badge</span>
</div>