Badge

Small labelling component to highlight statuses, counts or categories.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 

Props

• default 

Tokens

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

Examples

Basic

winduum

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

winduum-vue

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

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

winduum-react

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>

<!DOCTYPE html>
<html lang="en" class="font-sans dark" style="scrollbar-gutter: stable">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
    <meta name="color-scheme" content="light dark">

    <script>
        if (window.location.search.includes('dark=false')) {
            document.documentElement.classList.remove('dark')
        }
    </script>

    
  <link rel="stylesheet" crossorigin href="../../assets/main-D-GiX4b_.css">
  <link rel="stylesheet" crossorigin href="../../assets/style-CtiAQRAc.css">
</head>
<body>
<!-- #region body -->
<button class="x-badge">Badge</button>
<!-- #endregion body -->

<style>.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:.75rem;--x-badge-font-weight:700;--x-badge-background-color:yellow;--x-badge-color:#333}</style>

</body>
</html>

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>