V3 has reached EOL, Upgrade to PrimeVue 4

Badge

Badge is a small status indicator for another element.

Import #


// import as component
import Badge from 'primevue/badge';

// import as directive
import BadgeDirective from 'primevue/badgedirective';

app.directive('badge', BadgeDirective);

Basic #

Text to display is defined with the value property.


<Badge value="2"></Badge>

Severity #

Severity defines the variant of a badge.

26841235


<Badge value="2"></Badge>
<Badge value="6" severity="secondary"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
<Badge value="5" severity="contrast"></Badge>

Size #

Use the size property to customize the size of a Badge, currently large and xlarge are available as size options.

642


<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
<Badge value="2"></Badge>

Position #

A Badge can be positioned at the top right corner of an element by adding p-overlay-badge style class to the element and embedding the badge inside.

25+


<i v-badge="2" class="pi pi-bell" style="font-size: 2rem" />
<i v-badge.danger="'5+'" class="pi pi-calendar" style="font-size: 2rem" />
<i v-badge.danger class="pi pi-envelope" style="font-size: 2rem" />

Button #

Buttons have built-in support for badges to display a badge inline.


<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />

Accessibility #

Screen Reader

Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic, aria-live may be utilized as well. In case badges need to be tabbable, tabindex can be added to implement custom key handlers.

Keyboard Support

Component does not include any interactive elements.

name	type	default	description
value	string \| number	null	Value to display inside the badge.
severity	null \| HintedString<"success" \| "secondary" \| "info" \| "warning" \| "danger" \| "contrast"	null	Severity type of the badge.
size	null \| "large" \| "xlarge"	null	Size of the badge, valid options are 'large' and 'xlarge'.
pt	PassThrough<BadgePassThroughOptions<any	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	type	default	description
instance	any	null	Defines instance.
props	BadgeProps	null	Defines valid properties.
global	undefined \| object	null	Defines passthrough(pt) options in global config.
parent	any	null	Defines parent instance.

name	type	default	description
root	BadgePassThroughOptionType<T	null	Used to pass attributes to the root's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

name	type	default	description
context	BadgeContext	null
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
pt	PassThrough<BadgeDirectivePassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

Badge

Import #

Basic #

Severity #

Size #

Position #

Button #

Accessibility #

Screen Reader

Keyboard Support

Badge API

Badge #

Props #

Slots #

Interfaces #

BadgePassThroughMethodOptions #

BadgePassThroughAttributes #

BadgePassThroughOptions #

Types #

BadgePassThroughOptionType #

BadgeDirective #

Interfaces #

BadgePassThroughMethodOptions #

BadgeDirectiveOptions #

BadgeDirectivePassThroughOptions #

BadgeDirectivePassThroughAttributes #

BadgeContext #

BadgeDirectiveModifiers #

BadgeDirectiveBinding #

Types #

BadgeDirectivePassThroughOptionType #

name	type	default	description
root	BadgeDirectivePassThroughOptionType	null	Used to pass attributes to the root's DOM element.
hooks	DirectiveHooks<any, any	null	Used to manage all lifecycle hooks.

name	type	default	description
info	boolean	true	Current info state as a boolean.
success	boolean	false	Current success state as a boolean.
warning	boolean	false	Current warning state as a boolean.
danger	boolean	false	Current danger state as a boolean.
nogutter	boolean	null	Current gutter state as a boolean.
dot	boolean	null	Current dot state as a boolean.

name	type	default	description
value	string \| BadgeDirectiveOptions	null	Value of the Badge.
modifiers	BadgeDirectiveModifiers	null	Modifiers of the Badge.