Badge

shadow

Badges are inline-block elements that are informative and usually appear near another element. They are used as a notification that there are other elements associated with the element and inform the user of their number.

Basic usage

To use the Badge component, include it in the HTML with the required attributes.

Theming

Colors

Attributes and Properties

color

Description	The color to use from your application's color palette. The default options are: "primary", "success", "warning", "warning", "complete", "info", and "menu". For more information on colors, visit Customization Basics.
Attribute	color
Type	"complete" ｜ "danger" ｜ "info" ｜ "menu" ｜ "primary" ｜ "success" ｜ "warning" ｜ string ｜ undefined
Default	undefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--wj-chip-border-radius	Adjusts the roundness of the badge element

Slots

Name	Description
``	The contents are placed between the named slots.
end	The content is placed on the right in the LTR and on the left in the RTL.
icon-only	It should be applied to an icon in a button that does not contain text.
start	The content is placed on the left in the LTR and on the right in the RTL.