Note

This documentation describes the Badge Vue component for native UI views for Xml templates see badge.

Badge

A small labelled indicator used to display counts, statuses, or short metadata. Wraps PrimeVue Badge.

Import

import { Badge } from '@neos/design-system'

Props

Prop	Type	Default	Description
value	string \| number	undefined	Text or number to display inside the badge
severity	'none' \| 'info' \| 'positive' \| 'warning' \| 'danger'	'none'	Color variant
size	'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'medium'	Badge size

Notes

• Values with 2 or fewer characters receive a circular pill style.
• Severity 'none' maps to the default neutral appearance.
• Severity 'positive' maps to PrimeVue's 'success'.
• Severity 'warning' maps to PrimeVue's 'warn'.

Usage Examples

Notification count

<Badge :value="unreadCount" severity="danger" />

Status label

<Badge value="Active" severity="positive" />
<Badge value="Pending" severity="warning" />
<Badge value="Rejected" severity="danger" />

Inside a button

<button label="Messages" :badge="messageCount" badge-severity="info" />

Alongside a label

<HorizontalLayout space="small" vertical-align="center">
  <Text>Invoices</Text>
  <Badge :value="pendingInvoices" severity="warning" size="small" />
</HorizontalLayout>