Badge Component
Category: DataThe BADGE custom tag can create a small colored bubble to store the implied quantity of information for an element. If the badge has no value, it will be displayed directly as a dot red dot.
Introduction
Badges are typically used to indicate new information or updates. Small dots represent minimal information, while numbers (with optional + suffix) represent larger quantities.
The badge component can toggle between dot and numbered badge styles. Badge content can be specified via the label attribute or directly within the tag.
- Output
- HTML
-
2 -
Colors
Badges are red by default. Use the theme attribute for additional color options: prim, error (default), succ, info, warn, issue, text, brief and caption.
- Output
- HTML
-
2 New Hot TOP 2 1 21 65 10+ 10+ 4 4 7 -
Outline Badges
Badges are solid-filled by default. Add type=seal for outline-style badges.
- Output
- HTML
-
2 New Hot TOP 2 1 21 65 10+ 10+ 4 4 7 -
Transparent Badges
Badges are opaque by default. Add the glassy attribute for semi-transparent badges that work well over dark elements.
For solid badges, transparency works with prim, succ, error, info, issue, warn and text themes. All outline badges support transparency.
- Output
- HTML
-
2 New Hot TOP 2 -
Shapes
Badges have rounded corners (round) by default. Use the shape attribute for alternative shapes: square (square), radius (small rounded corners), and drop (teardrop).
- Output
- HTML
-
14 65 2 200+ 14 65 2 200+ -
Shadow Effect
Badges often blend with other elements. When color contrast is low, add the shadowed attribute for a 2px white shadow to improve visibility.
- Output
- HTML
-
2 New Hot TOP 2 -
Attributes
| Name | Values | Default | Description |
|---|---|---|---|
| type | 'seal'/'solid' | 'solid' | Badge type - default solid fill |
| theme | 'prim'/'error'/'succ'/'info'/'warn'/'issue'/'text'/'brief'/'caption' | 'error' | Color theme - default red |
| shape | 'radius'/'square'/'round'/'drop' | 'round' | Shape - default rounded |
| glassy | '' | - | Whether semi-transparent |
| shadowed | '' | - | A badge with a crisp white edge |
Common Methods
Common component methods:
set: Set properties (takes key-value pairs or array)reset: Reset properties (no params)clear: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected: Component connected (no params)disconnected: Component disconnected (no params)adopted: Component moved (no params)set: Property set (receives value)cleared: Property cleared (no params)reset: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})
