Skip to content

Badge


View Source 

Usage

css
@import "winduum/src/ui/badge/index.css" layer(components);

Variants

  • default 

Tokens

  • bordered
  • muted
  • sm
  • lg
  • square
  • circle

Props

  • default-props 

Examples

Basic

html
<div class="ui-badge">Badge</div>
<div class="ui-badge rounded-full">Badge</div>

Flat

html
<div class="ui-badge accent-primary">Primary</div>
<div class="ui-badge accent-main">Main</div>
<div class="ui-badge accent-success">Success</div>
<div class="ui-badge accent-error">Error</div>
<div class="ui-badge accent-warning">Warning</div>
<div class="ui-badge accent-info">Info</div>
<div class="ui-badge accent-dark">Dark</div>
<div class="ui-badge accent-light text-dark">Light</div>

Bordered

html
<div class="ui-badge bordered accent-primary">Primary</div>
<div class="ui-badge bordered accent-main">Main</div>
<div class="ui-badge bordered accent-success">Success</div>
<div class="ui-badge bordered accent-error">Error</div>
<div class="ui-badge bordered accent-warning">Warning</div>
<div class="ui-badge bordered accent-info">Info</div>
<div class="ui-badge bordered accent-dark">Dark</div>
<div class="ui-badge bordered accent-light">Light</div>

Muted

html
<div class="ui-badge muted accent-primary">Primary</div>
<div class="ui-badge muted accent-main">Main</div>
<div class="ui-badge muted accent-success">Success</div>
<div class="ui-badge muted accent-error">Error</div>
<div class="ui-badge muted accent-warning">Warning</div>
<div class="ui-badge muted accent-info">Info</div>
<div class="ui-badge muted accent-dark">Dark</div>
<div class="ui-badge muted accent-light">Light</div>

Small

html
<div class="ui-badge sm">Badge</div>

Large

html
<div class="ui-badge lg">Badge</div>

Square

html
<div class="ui-badge square">1</div>
<div class="ui-badge square bordered">2</div>
<div class="ui-badge square muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</div>

Circle

html
<div class="ui-badge circle">1</div>
<div class="ui-badge circle bordered">2</div>
<div class="ui-badge circle muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</div>

Icon

html
<div class="ui-badge muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
    Badge
</div>
<div class="ui-badge bordered">
    Badge
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</div>
<button class="ui-badge square">
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<svg hidden>
    <symbol id="icon-adjustments-vertical" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </symbol>
</svg>

Custom

html
<button class="ui-badge">Badge</button>
css
.ui-badge {
    --ui-badge-height: 1rem;
    --ui-badge-py: 0;
    --ui-badge-px: 1rem;
    --ui-badge-border-radius: 0;
    --ui-badge-font-size: 0.75rem;
    --ui-badge-font-weight: 700;
    --ui-badge-bg: yellow;
    --ui-badge-color: #333;
}

You can also extend the badge with any TailwindCSS class to customize it

html
<button class="ui-badge bg-gray-200 text-dark">Badge</button>

Group

You can group badges into groups via ui-group component.

html
<div class="ui-group">
    <div class="ui-badge">Badge</div>
    <div class="ui-badge">Badge</div>
    <div class="ui-badge">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge bordered">Badge</div>
    <div class="ui-badge bordered">Badge</div>
    <div class="ui-badge bordered">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge muted">Badge</div>
    <div class="ui-badge muted">Badge</div>
    <div class="ui-badge muted">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge bg-gray-200 text-dark">
        <span>npm</span>
    </div>
    <div class="ui-badge bg-info">
        <span>7.1.2</span>
    </div>
</div>

Released under the MIT License.