Components

Badge

Used to highlight short pieces of information, such as statuses, counts, or labels, often displayed alongside UI elements.

Badge

Badge stack

Icon badge

Icon text badge

Component

View code

Show playground

Badge

Props

Props	Default	Type
`styleType`	`BadgeStyle.BORDER`	`BadgeStyle`
`shape`	`BadgeShape.BADGE`	`BadgeShape`
`color`	`ColorAccent.NEUTRAL`	`ColorAccent`
`showDot`	`false`	`boolean`
`closeable`	`false`	`boolean`
`isTransparent`	`false`	`boolean`
`showIcon`	`false`	`boolean`
`text`	`Badge`	`string`
`icon`	`mdi:help`	`string`

Usage

styleType

The styleType prop defines the badge appearance. It uses the BadgeStyle enum.

 <template>
    <Badge :styleType="BadgeStyle.BORDER" />
</template>

Type: BadgeStyle
Default: BadgeStyle.BORDER

Options

Value	Description
`BORDER`	Applies an outline border with a subtle background
`FLAT`	Uses a borderless style with a subtle background
`FILLED`	Applies a bold background

shape

The shape prop defines the badge shape. It uses the BadgeShape enum.

 <template>
    <Badge :shape="BadgeShape.BADGE" />
</template>

Type: BadgeShape
Default: BadgeShape.BADGE

Options

Value	Description
`BADGE`	Badge-shaped format
`PILL`	Pill-shaped format

color

Applies a color to the badge. It uses the ColorAccent enum.

 <template>
    <Badge :color="ColorAccent.NEUTRAL" />
</template>

Type: ColorAccent
Default: ColorAccent.NEUTRAL

Options

Value	Description
`NEUTRAL`	Neutral
`SUCCESS`	Success
`WARNING`	Warning
`DANGER`	Danger
`INFO`	Info
`PRIMARY_BRAND`	Primary Brand
`SECONDARY_BRAND`	Secondary Brand

showDot

Displays a dot on the badge on the left side.

 <template>
    <Badge :showDot="true" />
</template>

Type: boolean
Default: false

closeable

Allows the badge to be closed by clicking on it. Uses the '@close' event.

 <template>
    <Badge :closeable="true" @close="handleClose" />
</template>
<script setup lang="ts">
const handleClose = () => {
    console.log('Badge closed')
}
</script>

Type: boolean
Default: false
Emmiter: @close

isTransparent

Applies a transparent background to the badge.

 <template>
    <Badge :isTransparent="true" />
</template>

Type: boolean
Default: false

showIcon

Displays an icon on the badge on the left side. In case of using showDot, the icon will appear on the right side of the dot. It can be combined with the icon to display an icon.

 <template>
    <Badge :showIcon="true" icon="mdi:help" />
</template>

Type: boolean
Default: false

text

The text displayed on the badge.

 <template>
    <Badge text="I am a badge" />
</template>

Type: string
Default: 'Badge'

icon

The icon displayed on the badge. It requires the showIcon to be true.

 <template>
    <Badge :showIcon="true" icon="mdi:help" />
</template>

Type: string
Default: 'mdi:help'

Emits

Value	Description
`@close`	Triggers a callback function while using closeable.

Example

 <template>
    <Badge :closeable="true" @close="handleClose" />
</template>
<script setup lang="ts">
const handleClose = () => {
    console.log('Badge closed')
}
</script>