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>
<!-- 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>
<!-- 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>
<!-- 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
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.
<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" 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>