Badge ​

The j-badge component is used to display a small notification badge.

Usage ​

<j-badge variant="primary" size="md">New</j-badge>

Properties ​

Variant string ​

Use the variant property to set the color of the badge. Available options include primary, secondary, success, warning, and danger.

<j-badge variant="primary">Primary</j-badge>
<j-badge variant="secondary">Secondary</j-badge>
<j-badge variant="success">Success</j-badge>
<j-badge variant="warning">Warning</j-badge>
<j-badge variant="danger">Danger</j-badge>

Size string ​

Use the size property to set the size of the badge. Available options include sm, md, and lg.

<j-badge size="sm">Small</j-badge>
<j-badge size="md">Medium</j-badge>
<j-badge size="lg">Large</j-badge>

Slots ​

The j-badge component does not have any slots.