Badge

Badges are used to highlight status, numbers, or tags.

Examples

Variants

Badges with different variants

Primary

Secondary

Success

Info

Warning

Danger

Dark

Light

Sizes

Badges with different sizes

Small

Default

Large

Rounded Square

Sharp

Badge with Count

Badges with rounded corners

Messages5

Emails99+

Code

<div class="flex gap-4 items-center">
    <wdc-badge>Primary</wdc-badge>
    <wdc-badge variant="secondary">Secondary</wdc-badge>
    <wdc-badge variant="success">Success</wdc-badge>
    <wdc-badge variant="danger">Danger</wdc-badge>
    <wdc-badge variant="warning">Warning</wdc-badge>
    <wdc-badge variant="info">Info</wdc-badge>
</div>
 <div class="flex gap-4 items-center mt-4">
    <wdc-badge size="sm">Small</wdc-badge>
    <wdc-badge size="md">Medium</wdc-badge>
    <wdc-badge size="lg">Large</wdc-badge>
</div>
 <div class="flex gap-4 items-center mt-4">
    <wdc-badge [rounded]="true">Rounded</wdc-badge>
    <wdc-badge variant="success" [rounded]="true" size="sm">Small</wdc-badge>
</div>

API Reference

Input	Type	Default	Description
value	string \| number	-	Value to display (optional, can use content projection).
variant	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info'	'primary'	Visual style variant.
size	'sm' \| 'md' \| 'lg'	'md'	Size of the badge.
rounded	boolean	false	Whether to use fully rounded corners (pill shape).