@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
29 lines (19 loc) • 889 B
Markdown
# MNumberBadge
A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `label*` | Content of the badge. | `number` | - |
| `appearance` | Allows to define the badge appearance. | `"standard"` `"danger"` `"inverse"` `"accent"` | `"standard"` |
| `size` | Allows to define the badge size. | `"s"` `"m"` | `"s"` |
## Dependencies
### Used By
- [MTabs](../tabs)
- [MTag](../tag)
### Graph
```mermaid
graph TD;
MTabs --> MNumberBadge
MTag --> MNumberBadge
style MNumberBadge fill:#008240,stroke:#333,stroke-width:4px
```