Components

Badge stack

Displays multiple badges in a compact, stacked layout, typically used to represent grouped labels, categories, or statuses.

Badge

Badge stack

Icon badge

Icon text badge

Component

View code

Show playground

Badge 1

Badge 2

Badge 3

...

Props

Props	Default	Type
`items`	`An example array`	`Badge[]`
`styleType`	`BadgeStyle.BORDER`	`BadgeStyle`
`shape`	`BadgeShape.BADGE`	`BadgeShape`
`color`	`ColorAccent.NEUTRAL`	`ColorAccent`
`showDot`	`false`	`boolean`
`closeable`	`false`	`boolean`
`isTransparent`	`false`	`boolean`
`showIcon`	`false`	`boolean`
`itemsLimit`	`null`	`number \| null`
`counterType`	`StackCounterType.ELLIPSIS`	`StackCounterType`
`badgeClass`	—	`string`
`ellipsisBadgeClass`	—	`string`

Usage

items

The items prop defines the badges to be displayed.

Each item can optionally override styleType, shape, color, isTransparent, showDot, closeable and showIcon individually. When an item does not set one of these, it falls back to the matching BadgeStack prop.

 <template>
    <BadgeStack :items="items" :styleType="BadgeStyle.BORDER" />
</template>
<script setup lang="ts">
const items = [
    { text: "Badge 1" },
    { text: "Badge 2" },
    { text: "Badge 3" },
    { text: "Badge 4" },
    // This badge overrides the stack-level styleType and color.
    { text: "Badge 5", styleType: BadgeStyle.FILLED, color: ColorAccent.DANGER },
]
</script>

TypeScript interface

 interface Badge {
    text: string 
    icon?: string 
    styleType?: BadgeStyle
    shape?: BadgeShape
    color?: ColorAccent
    isTransparent?: boolean
    showDot?: boolean
    closeable?: boolean
    showIcon?: boolean
}

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

itemsLimit

The itemsLimit prop sets the maximum number of items displayed in the badge stack.

 <template>
    <BadgeStack :itemsLimit="3" />
</template>

Type: number | null
Default: null

counterType

Sets the counter type. It will only appear if the itemsLimit prop is set to a value lower than the amount of items. It uses the StackCounterType enum.

 <template>
    <BadgeStack :itemsLimit="3" :counterType="StackCounterType.COUNTER" />
</template>

Type: StackCounterType
Default: StackCounterType.ELLIPSIS

Options

Value	Description
`COUNTER`	If the total amount of items is higher than: `itemsLimit`it will display a counter with the amount of items that are remaining from the total. In case of having more than 9 items, it will display '+9'.
`ELLIPSIS`	In the event of more items than the limit or the base limit (9 items), it will display an ellipsis (...).

badgeClass

The badgeClass prop allows you to apply custom CSS classes to the badges in the stack.

 <template>
    <BadgeStack badgeClass="border-red-500" />
</template>

Type: string

ellipsisBadgeClass

The ellipsisBadgeClass prop allows you to apply custom CSS classes to the ellipsis badge when the counterType is set to StackCounterType.ELLIPSIS.

 <template>
    <BadgeStack :counterType="StackCounterType.ELLIPSIS" ellipsisBadgeClass="bg-blue-500" />
</template>

Type: string