DocsElements

Badge

Classes Information

ClassNameDescription
badgeBadge elements
badge-squaredBadge set square
badge-primaryBadge primary color
badge-secondaryBadge secondary color
badge-successBadge success color
avatar-warningBadge warning color
badge-errorBadge error color
badge-outlineBadge with outline
badge-outline-primaryBadge with outline primary
badge-outline-secondayBadge with outline secondary
badge-outline-successBadge with outline success
badge-outline-warningBadge with outline warning
badge-outline-errorBadge with outline error
badge-softBadge with soft background and border
badge-soft-primaryBadge with soft background primary and border
badge-soft-secondayBadge with soft background secondary and border
badge-soft-successBadge with soft background success and border
badge-soft-warningBadge with soft background warning and border
badge-soft-errorBadge with soft background error and border
badge-subtleBadge with subtle background primary
badge-subtle-primaryBadge with subtle background primary
badge-subtle-secondayBadge with subtle background secondary
badge-subtle-successBadge with subtle background success
badge-subtle-warningBadge with subtle background warning
badge-subtle-errorBadge with subtle background error
badge-xsextra small size
badge-smsmall size
badge-mdmedium small size
badge-lglarge small size

Basic Usage

default

Example Code

html
<span class="badge">Default</span>

Squere

default

Example Code

html
<span class="badge badge-square">Default</span>

Sizes

Extra SmallSmallMediumLarge

Example Code

html
<span class="badge badge-xs">Extra Small</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>

Colors

primarysecondarysuccesswarningerror

Example Code

html
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>

Soft

darkprimarysecondarysuccesswarningerror

Example Code

html
<span class="badge badge-soft">Dark</span>
<span class="badge badge-soft-primary">Primary</span>
<span class="badge badge-soft-secondary">Secondary</span>
<span class="badge badge-soft-success">Success</span>
<span class="badge badge-soft-warning">Warning</span>
<span class="badge badge-soft-error">Error</span>

Subtle

Darkprimarysecondarysuccesswarningerror

Example Code

html
<span class="badge badge-subtle">Dark</span>
<span class="badge badge-subtle-primary">Primary</span>
<span class="badge badge-subtle-secondary">Secondary</span>
<span class="badge badge-subtle-success">Success</span>
<span class="badge badge-subtle-warning">Warning</span>
<span class="badge badge-subtle-error">Error</span>

Outline

darkprimarysecondarysuccesswarningerror

Example Code

html
<span class="badge badge-outline">Error</span>
<span class="badge badge-outline-primary">Primary</span>
<span class="badge badge-outline-secondary">Secondary</span>
<span class="badge badge-outline-success">Success</span>
<span class="badge badge-outline-warning">Warning</span>
<span class="badge badge-outline-error">Error</span>

Previous

Avatar

Next

Button