Skip to main content

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.

List

Editing styles

Colors

Attributes and Properties

color

DescriptionThe color to use from your application's color palette. The default options are: "primary", "success", "warning", "warning", "complete", "info", and "menu". For more information about colors, visit Customization Basics.
Attributecolor
Type"complete" | "danger" | "info" | "menu" | "primary" | "success" | "warning" | string | undefined
Defaultundefined

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

NameDescription
--wje-badge-border-radiusAdjusts the roundness of the element
--wje-badge-padding-bottomAdjusts the lower internal offset of the element
--wje-badge-padding-inlineAdjusts the horizontal internal offset of the element
--wje-badge-padding-topAdjusts the upper internal offset of the element

Slots

NameDescription
``The contents are placed between the named slots.
endThe content is placed on the right in the LTR and on the left in the RTL.
icon-onlyIt should be applied to an icon in a button that does not contain text.
startThe content is placed on the left in the LTR and on the right in the RTL.