Badge

View Source 

Usage

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

Variants

• default 

Props

• default 

Tokens

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

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Basic

html

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

vue

<script setup lang="ts">
    import { Badge } from '@/components/badge'
</script>

<template>
  <Badge>Badge</Badge>
  <Badge class="rounded-full">Badge</Badge>
</template>

jsx

import { Badge } from "@/components/badge"

export function Example() {
    return (
        <>
            <Badge>Badge</Badge>
            <Badge className="rounded-full">Badge</Badge>
        </>
    )
}

Flat

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

Bordered

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

Muted

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

Small

<div class="x-badge sm">Badge</div>

Large

<div class="x-badge lg">Badge</div>

Square

<div class="x-badge square">1</div>
<div class="x-badge square bordered">2</div>
<div class="x-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

<div class="x-badge circle">1</div>
<div class="x-badge circle bordered">2</div>
<div class="x-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

<div class="x-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="x-badge bordered">
    Badge
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</div>
<button class="x-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

<button class="x-badge">Badge</button>

.x-badge {
    --x-badge-block-size: 1rem;
    --x-badge-padding-block: 0;
    --x-badge-padding-inline: 1rem;
    --x-badge-border-radius: 0;
    --x-badge-font-size: 0.75rem;
    --x-badge-font-weight: 700;
    --x-badge-background-color: yellow;
    --x-badge-color: #333;
}

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

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

Group

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

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