Badge Component

The Badge component in the Arts Oven UI Component Library is designed to display small bits of information, such as notifications, statuses, or labels. Badges can enhance user interfaces by providing contextual information that is visually distinct and easy to interpret.

Badge

Default

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

<span className="badge">Default</span>

Badge Branding

PrimarySecondaryInfoWarningSuccessError

<!-- Primary badge-->
<span class="badge badge-primary">Primary</span>

<!-- Secondary badge-->
<span class="badge badge-secondary">Secondary</span>

<!-- Info badge-->
<span class="badge badge-info">Info</span>

<!-- Warning badge-->
<span class="badge badge-warning">Warning</span>

<!-- Success badge-->
<span class="badge badge-success">Success</span>

<!-- Error badge-->
<span class="badge badge-error">Error</span>

<!-- Primary badge-->
<span className="badge badge-primary">Primary</span>

<!-- Secondary badge-->
<span className="badge badge-secondary">Secondary</span>

<!-- Info badge-->
<span className="badge badge-info">Info</span>

<!-- Warning badge-->
<span className="badge badge-warning">Warning</span>

<!-- Success badge-->
<span className="badge badge-success">Success</span>

<!-- Error badge-->
<span className="badge badge-error">Error</span>

Badge Sizes

Extra SmallNormalMediumLargeExtra Large

<!-- Xs Size badge-->
<span class="badge badge-xs">Extra Small</span>

<!-- Normal Size badge-->
<span class="badge badge-primary">Normal</span>

<!-- Medium Size badge-->
<span class="badge badge-secondary badge-md">Medium</span>

<!-- Large Size badge-->
<span class="badge badge-info badge-lg">Large</span>

<!-- XL Size badge-->
<span class="badge badge-warning badge-xl">Extra Large</span>

<!-- Xs Size badge-->
<span className="badge badge-xs">Extra Small</span>

<!-- Normal Size badge-->
<span className="badge badge-primary">Normal</span>

<!-- Medium Size badge-->
<span className="badge badge-secondary badge-md">Medium</span>

<!-- Large Size badge-->
<span className="badge badge-info badge-lg">Large</span>

<!-- XL Size badge-->
<span className="badge badge-warning badge-xl">Extra Large</span>

Empty Badge

<!-- Xs Size badge-->
<span class="badge badge-primary badge-xs"></span>

<!-- Normal Size badge-->
<span class="badge badge-primary"></span>

<!-- Medium Size badge-->
<span class="badge badge-primary badge-md"></span>

<!-- Large Size badge-->
<span class="badge badge-primary badge-lg"></span>

<!-- Xl Size badge-->
<span class="badge badge-primary badge-xl"></span>

<!-- Xs Size badge-->
<span className="badge badge-primary badge-xs"></span>

<!-- Normal Size badge-->
<span className="badge badge-primary"></span>

<!-- Medium Size badge-->
<span className="badge badge-primary badge-md"></span>

<!-- Large Size badge-->
<span className="badge badge-primary badge-lg"></span>

<!-- Xl Size badge-->
<span className="badge badge-primary badge-xl"></span>

Contribute ideas!

Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.