Badge

Neo-brutalist inline badge component for labels, statuses, and categories. Supports multiple variants, sizes, dot indicator, pulse animation, and closable functionality.

Demo

Preview

变体

默认主要次要强调危险成功轮廓

尺寸

小默认大

圆点指示器

在线可用离线小尺寸

脉冲动画

实时同步中新消息直播中

图标插槽

已完成需要注意收藏

可关闭徽标

VueTypeScriptTailwind CSS

Installation

pnpm dlx brutx-vue@latest add badge

Usage

vue

<script setup>
import { Badge } from 'brutx-ui-vue'
</script>

<template>
    <Badge variant="default">Default</Badge>
    <Badge variant="primary">Primary</Badge>
    <Badge variant="success">Success</Badge>
</template>

Dot Indicator

Renders a small dot before the badge content via the dot prop, commonly used for status indication. The dot color inherits the current text color (bg-current), and its size adjusts automatically with size.

Size	Dot Size	Right Margin
`sm`	`h-1.5 w-1.5`	`mr-1`
`default`	`h-2 w-2`	`mr-1.5`
`lg`	`h-2.5 w-2.5`	`mr-2`

vue

<script setup>
import { Badge } from 'brutx-ui-vue'
</script>

<template>
    <Badge dot>Online</Badge>
    <Badge variant="success" dot>Available</Badge>
    <Badge variant="danger" dot>Offline</Badge>
    <Badge variant="accent" dot size="sm">Small</Badge>
</template>

Pulse Animation

Enables pulse animation (animate-brutal-badge-pulse) for the dot via the pulse prop. pulse implies dot, so there is no need to set both. Suitable for real-time status, new message alerts, and other attention-grabbing scenarios.

vue

<script setup>
import { Badge } from 'brutx-ui-vue'
</script>

<template>
    <Badge variant="success" pulse>Syncing</Badge>
    <Badge variant="danger" pulse>New Message</Badge>
    <Badge variant="primary" pulse>Live</Badge>
</template>

Closable Badge

Renders a close button (X icon) on the right side of the badge via the closable prop. Clicking the button triggers the close event, and the event does not bubble (internally calls stopPropagation). The close button has built-in accessibility support; the aria-label is automatically adapted to the current language through the i18n system.

vue

<script setup>
import { ref } from 'vue'
import { Badge } from 'brutx-ui-vue'

const tags = ref(['Vue', 'TypeScript', 'Tailwind CSS'])

function handleClose(index: number) {
    tags.value.splice(index, 1)
}
</script>

<template>
    <div class="flex flex-wrap items-center gap-2">
        <Badge
            v-for="(tag, index) in tags"
            :key="tag"
            variant="primary"
            closable
            @close="handleClose(index)"
        >
            {{ tag }}
        </Badge>
        <span v-if="tags.length === 0" class="text-sm text-brutal-fg">All tags closed</span>
    </div>
</template>

Icon Slot

Inserts an icon before the badge content via the icon named slot. It is recommended to use the @lucide/vue icon library and set appropriate icon sizes based on size.

vue

<script setup>
import { Badge } from 'brutx-ui-vue'
import { CheckCircle, AlertTriangle, Info } from '@lucide/vue'
</script>

<template>
    <Badge variant="success">
        <template #icon>
            <CheckCircle class="h-3.5 w-3.5" />
        </template>
        Completed
    </Badge>
    <Badge variant="danger">
        <template #icon>
            <AlertTriangle class="h-3.5 w-3.5" />
        </template>
        Needs Attention
    </Badge>
    <Badge variant="secondary">
        <template #icon>
            <Info class="h-3.5 w-3.5" />
        </template>
        Info
    </Badge>
</template>

Combined Usage

Dot, icon slot, and close button can be used together:

vue

<script setup>
import { Badge } from 'brutx-ui-vue'
import { Star } from '@lucide/vue'

function handleClose() {
    console.log('Badge closed')
}
</script>

<template>
    <Badge variant="primary" dot closable @close="handleClose">
        Status Badge
    </Badge>
    <Badge variant="accent" closable @close="handleClose">
        <template #icon>
            <Star class="h-3.5 w-3.5" />
        </template>
        Favorite
    </Badge>
</template>

Variants

Variant	Description
`default`	Standard background color with small shadow
`primary`	Primary (coral) background
`secondary`	Secondary (mint) background
`accent`	Accent (yellow) background
`danger`	Destructive (red) background
`success`	Success (green) background
`outline`	Transparent background, no shadow

Sizes

Size	Padding	Font Size
`sm`	`px-2 py-0.5`	`text-xs`
`default`	`px-3 py-1`	`text-sm`
`lg`	`px-4 py-1.5`	`text-base`

vue

<script setup>
import { Badge } from 'brutx-ui-vue'
</script>

<template>
    <Badge variant="primary" size="sm">Small</Badge>
    <Badge variant="primary" size="default">Default</Badge>
    <Badge variant="primary" size="lg">Large</Badge>
</template>

Exported Types

The component also exports the badgeVariants utility function, which can be used to reuse Badge style variants in custom components:

import { badgeVariants } from 'brutx-ui-vue'

// Returns a combined Tailwind class string
const classes = badgeVariants({ variant: 'primary', size: 'sm' })

API Reference

Badge — Props
Name	Type	Default	Description
`variant`	`"accent-subtle" \| "accent" \| "danger-subtle" \| "danger" \| "default" \| "info-subtle" \| "outline" \| "primary-subtle" \| "primary" \| "secondary-subtle" \| "secondary" \| "success-subtle" \| "success" \| undefined`	`"default"`	The badge color and border variant.
Details Declared type NonNullable<"default" \| "primary" \| "secondary" \| "success" \| "danger" \| "primary-subtle" \| "secondary-subtle" \| "danger-subtle" \| "success-subtle" \| "info-subtle" \| "accent" \| "outline" \| "accent-subtle" \| null \| undefined> \| undefined Literal values `"accent-subtle"` `"accent"` `"danger-subtle"` `"danger"` `"default"` `"info-subtle"` `"outline"` `"primary-subtle"` `"primary"` `"secondary-subtle"` `"secondary"` `"success-subtle"` `"success"` Default value details Declaration `'default'` Source: packages/ui/src/components/badge/Badge.vue Resolved value `"default"` Source Badge.vue:20 packages/ui/src/components/badge/Badge.vue
`size`	`"default" \| "lg" \| "sm" \| undefined`	`"default"`	Sets the badge size, including its dot, icon spacing, and close icon.
Details Declared type NonNullable<"default" \| "lg" \| "sm" \| null \| undefined> \| undefined Literal values `"default"` `"lg"` `"sm"` Default value details Declaration `'default'` Source: packages/ui/src/components/badge/Badge.vue Resolved value `"default"` Source Badge.vue:21 packages/ui/src/components/badge/Badge.vue
`closable`	`boolean \| undefined`	`false`	Shows the close button. The consumer decides whether to remove the badge after closing.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/badge/Badge.vue Resolved value `false` Source Badge.vue:22 packages/ui/src/components/badge/Badge.vue
`dot`	`boolean \| undefined`	`false`	Shows a decorative dot before the badge content.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/badge/Badge.vue Resolved value `false` Source Badge.vue:23 packages/ui/src/components/badge/Badge.vue
`pulse`	`boolean \| undefined`	`false`	Shows the dot with a pulse animation, even when dot is disabled.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/badge/Badge.vue Resolved value `false` Source Badge.vue:24 packages/ui/src/components/badge/Badge.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes merged onto the badge root span.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/badge/Badge.vue Resolved value `undefined` Source Badge.vue:25 packages/ui/src/components/badge/Badge.vue

Badge — Events
Name	Signature or type	Description
`@close`	`[]`	Emitted when the close button is clicked, after stopping the click from bubbling.
Details Declared type [] Source Badge.vue packages/ui/src/components/badge/Badge.vue

Badge — Slots
Name	Signature or type	Description
`#icon`	`{}`	An icon before the main content. Its container is rendered only when the slot is provided.
Details Declared type {} Source Badge.vue packages/ui/src/components/badge/Badge.vue
`#default`	`{}`	The badge text or main content.
Details Declared type {} Source Badge.vue packages/ui/src/components/badge/Badge.vue

Accessibility

Keyboard: Close button supports Space / Enter to trigger
ARIA Attributes: Close button automatically sets aria-label, adapted to the current language via the i18n system
Motion Reduction: Respects prefers-reduced-motion system setting; pulse animation is automatically disabled

Badge ​

Demo ​

Installation ​

Usage ​

Dot Indicator ​

Pulse Animation ​

Closable Badge ​

Icon Slot ​

Combined Usage ​

Variants ​

Sizes ​

Exported Types ​

API Reference ​

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

Declared type

Source

Accessibility ​

Badge

Demo

Installation

Usage

Dot Indicator

Pulse Animation

Closable Badge

Icon Slot

Combined Usage

Variants

Sizes

Exported Types

API Reference

Accessibility