<dy-badge>
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
Example
Loading...
<dy-badge .count=${"New"}></dy-badge> <dy-badge .dot=${true}> This is Link </dy-badge> <dy-badge .count=${5}> <dy-avatar src=https://api.dicebear.com/5.x/bottts-neutral/svg></dy-avatar> </dy-badge> <dy-badge .icon=${icons.delete} .color=${"informative"}> <dy-avatar src=https://api.dicebear.com/5.x/bottts-neutral/svg></dy-avatar> </dy-badge> <dy-badge
.count=${199}
.max=${99}
.color=${"positive"}> <dy-avatar src=https://api.dicebear.com/5.x/bottts-neutral/svg></dy-avatar> </dy-badge>
API
DuoyunBadgeElement
Extends TapBadgeElement
TapBadgeElement
Shadow DOM; Extends GemElement
TapBadgeElement Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
color(color) |
Yes | StringList<'positive' | 'informative' | 'notice'> |
|
count(count) |
Yes | string |
Support number and string |
dot(dot) |
Yes | boolean |
|
small(small) |
Yes | boolean |
|
max(max) |
Yes | number |
|
icon |
Yes | string | Element | DocumentFragment |
TapBadgeElement Other
| Type | Value |
|---|---|
| Slot | unnamed |
| Part | badge |
| CSS State | inline |