@mozaic-ds/vue/src/components/statusbadge/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MStatusBadge

A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `label*` | Content of the status badge | `string` | - |
| `size` | Allows to define the status badge size | `"s"` `"m"` | `"m"` |
| `status` | Allows to define the status badge type | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |

## Dependencies

### Depends on

- [MStatusDot](../statusdot)

### Graph

```mermaid
graph TD;
  MStatusBadge --> MStatusDot
style MStatusBadge fill:#008240,stroke:#333,stroke-width:4px
```

### Used By

- [MPageHeader](../pageheader)

### Graph

```mermaid
graph TD;
  MPageHeader --> MStatusBadge
style MStatusBadge fill:#008240,stroke:#333,stroke-width:4px
```