Badge

The Badge component provides a flexible and customizable way to display status, labels, or other metadata with various color variants and sizes.

Installation

pnpm

pnpm i @vue-interface/badge

yarn

yarn add @vue-interface/badge

npm

npm i @vue-interface/badge

bun

bun i @vue-interface/badge

Tailwind Setup

@import '@vue-interface/badge/index.css';

Basic Usage

To create a badge component, use the <Badge> component. Use the closeable prop to add a close button and add close-left to place the close button on the left.

Basic Usage

Right Close Button

Left Close Button

Pill Badge

<Badge>Basic Usage</Badge>
<Badge closeable @click="() => {console.log('click')}" @close="() => {console.log('close')}">
    Right Close Button
</Badge>
<Badge closeable close-left>Left Close Button</Badge>
<Badge closeable class="badge-pill">Pill Badge</Badge>

Use the badge-outline class to create an outlined badge.

Basic Usage

Right Close Button

Left Close Button

Pill Badge

<Badge class="badge-outline">Basic Usage</Badge>
<Badge class="badge-outline" closeable>Right Close Button</Badge>
<Badge class="badge-outline" closeable close-left>Left Close Button</Badge>
<Badge class="badge-outline badge-pill" closeable >Pill Badge</Badge>

Custom Close Icon

You can override the default close icon using the close-icon slot.

Default Icon

Custom Icon

Show Code

<Badge closeable>
    Default Icon
</Badge>
<Badge closeable>
    <template #close-icon>
        <TrashIcon />
    </template>
    Custom Icon
</Badge>

Sizes

Customize the size of a badge using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using a predetermined size prop: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: badge-[size].

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

Show Code

<Badge size="badge-xs" closeable>xs</Badge>
<Badge size="badge-sm" closeable>sm</Badge>
<Badge size="badge-md" closeable>md</Badge>
<Badge size="badge-lg" closeable>lg</Badge>
<Badge size="badge-xl" closeable>xl</Badge>
<Badge size="badge-2xl" closeable>2xl</Badge>
<Badge size="badge-3xl" closeable>3xl</Badge>
<Badge size="badge-4xl" closeable>4xl</Badge>
<Badge size="badge-5xl" closeable>5xl</Badge>

Tailwind Sizes

For more granular control over badge sizes, use Tailwind's numeric sizing scale classes: badge-1 - badge-96.

badge-3

badge-3.5

badge-4

badge-5

badge-6

Show Code

<Badge size="badge-3" closeable>badge-3</Badge>
<Badge size="badge-3.5" closeable>badge-3.5</Badge>
<Badge size="badge-4" closeable>badge-4</Badge>
<Badge size="badge-5" closeable>badge-5</Badge>
<Badge size="badge-6" closeable>badge-6</Badge>

Arbitrary sizes

For precise sizing, specify exact pixel values using the syntax badge-[Npx] or any other CSS length units (rem, em, mm, etc.).

[16px]

[1.5rem]

Show Code

<Badge size="badge-[16px]" closeable>[16px]</Badge>
<Badge size="badge-[1.5rem]" closeable>[1.5rem]</Badge>

Color Variants

The badge component supports eight standard color variants: primary, secondary, success, danger, warning, info, light, dark. Use the syntax: badge-[variant].

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Show Code

<Badge class="badge-primary" closeable>Primary</Badge>
<Badge class="badge-secondary" closeable>Secondary</Badge>
<Badge class="badge-success" closeable>Success</Badge>
<Badge class="badge-danger" closeable>Danger</Badge>
<Badge class="badge-warning" closeable>Warning</Badge>
<Badge class="badge-info" closeable>Info</Badge>
<Badge class="badge-light" closeable>Light</Badge>
<Badge class="badge-dark" closeable>Dark</Badge>

Custom Colors

Customize the color of the badge component with the Tailwind color palette by using the class: badge-[color].

badge-green-500

badge-amber-500

badge-yellow-500

badge-red-500

Show Code

<Badge class="badge-green-500" closeable>badge-green-500</Badge>
<Badge class="badge-amber-500" closeable>badge-amber-500</Badge>
<Badge class="badge-yellow-500" closeable>badge-yellow-500</Badge>
<Badge class="badge-red-500" closeable>badge-red-500</Badge>

Color Shades

badge-red-50

badge-red-100

badge-red-200

badge-red-300

badge-red-400

badge-red-500

badge-red-600

badge-red-700

badge-red-800

badge-red-900

badge-red-950

Show Code

<Badge class="badge-red-50" closeable>badge-red-50</Badge>
<Badge class="badge-red-100" closeable>badge-red-100</Badge>
<Badge class="badge-red-200" closeable>badge-red-200</Badge>
<Badge class="badge-red-300" closeable>badge-red-300</Badge>
<Badge class="badge-red-400" closeable>badge-red-400</Badge>
<Badge class="badge-red-500" closeable>badge-red-500</Badge>
<Badge class="badge-red-600" closeable>badge-red-600</Badge>
<Badge class="badge-red-700" closeable>badge-red-700</Badge>
<Badge class="badge-red-800" closeable>badge-red-800</Badge>
<Badge class="badge-red-900" closeable>badge-red-900</Badge>
<Badge class="badge-red-950" closeable>badge-red-950</Badge>

Outline Sizes

Customize the size of a badge-outline using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes (Outline)

The size can be customized using a predetermined size prop: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: badge-[size].

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

Show Code

<Badge class="badge-outline" size="badge-xs" closeable>xs</Badge>
<Badge class="badge-outline" size="badge-sm" closeable>sm</Badge>
<Badge class="badge-outline" size="badge-md" closeable>md</Badge>
<Badge class="badge-outline" size="badge-lg" closeable>lg</Badge>
<Badge class="badge-outline" size="badge-xl" closeable>xl</Badge>
<Badge class="badge-outline" size="badge-2xl" closeable>2xl</Badge>
<Badge class="badge-outline" size="badge-3xl" closeable>3xl</Badge>
<Badge class="badge-outline" size="badge-4xl" closeable>4xl</Badge>
<Badge class="badge-outline" size="badge-5xl" closeable>5xl</Badge>

Tailwind Sizes (Outline)

For more granular control over badge-outline sizes, use Tailwind's numeric sizing scale classes: badge-1 - badge-96.

badge-3

badge-3.5

badge-4

badge-5

Show Code

<Badge class="badge-outline" size="badge-3" closeable>badge-3</Badge>
<Badge class="badge-outline" size="badge-3.5" closeable>badge-3.5</Badge>
<Badge class="badge-outline" size="badge-4" closeable>badge-4</Badge>
<Badge class="badge-outline" size="badge-5" closeable>badge-5</Badge>

Arbitrary sizes (Outline)

For precise sizing, specify exact pixel values using the syntax badge-[Npx] or any other CSS length units (rem, em, mm, etc.).

[16px]

[1.5rem]

Show Code

<Badge class="badge-outline" size="badge-[16px]" closeable>[16px]</Badge>
<Badge class="badge-outline" size="badge-[1.5rem]" closeable>[1.5rem]</Badge>

Outline Color Variants

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Show Code

<Badge class="badge-outline-primary" closeable>Primary</Badge>
<Badge class="badge-outline-secondary" closeable>Secondary</Badge>
<Badge class="badge-outline-success" closeable>Success</Badge>
<Badge class="badge-outline-danger" closeable>Danger</Badge>
<Badge class="badge-outline-warning" closeable>Warning</Badge>
<Badge class="badge-outline-info" closeable>Info</Badge>
<Badge class="badge-outline-light" closeable>Light</Badge>
<Badge class="badge-outline-dark" closeable>Dark</Badge>

Outline Color Shades

badge-red-50

badge-red-100

badge-red-200

badge-red-300

badge-red-400

badge-red-500

badge-red-600

badge-red-700

badge-red-800

badge-red-900

badge-red-950

Show Code

<Badge class="badge-outline-red-50" closeable>badge-red-50</Badge>
<Badge class="badge-outline-red-100" closeable>badge-red-100</Badge>
<Badge class="badge-outline-red-200" closeable>badge-red-200</Badge>
<Badge class="badge-outline-red-300" closeable>badge-red-300</Badge>
<Badge class="badge-outline-red-400" closeable>badge-red-400</Badge>
<Badge class="badge-outline-red-500" closeable>badge-red-500</Badge>
<Badge class="badge-outline-red-600" closeable>badge-red-600</Badge>
<Badge class="badge-outline-red-700" closeable>badge-red-700</Badge>
<Badge class="badge-outline-red-800" closeable>badge-red-800</Badge>
<Badge class="badge-outline-red-900" closeable>badge-red-900</Badge>
<Badge class="badge-outline-red-950" closeable>badge-red-950</Badge>

API

Props

Prop	Type	Default	Description
closeable	boolean	false	Add close button.
close-left	boolean	false	Left side close button.
size	string	'badge-md'	Badge size

Events

Event	Payload	Description
@click	PointerEvent	Emitted when the badge content is clicked.
@close	PointerEvent	Emitted when the close button is clicked.

Slots

Slot	Description
default	The main content of the badge.
close-icon	Optional slot to override the default close icon.