> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qonto.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Status Badge

A badge provides an additional property about an element in a compact and straightforward way. In the case of the Status
Badge, it indicates the status of an item, such as "Active" or "Inactive".

## Default Styling

By default, the Status Badge uses Qonto's branding:

<img src="https://mintcdn.com/qonto-6237c309/5g3taSVWo_yYBcHH/api-reference/sdk-libraries/doc-pages/img/badge-status-default.png?fit=max&auto=format&n=5g3taSVWo_yYBcHH&q=85&s=3942519a94395d54379b6abddd083aa3" alt="Default badge style" width="582" height="53" data-path="api-reference/sdk-libraries/doc-pages/img/badge-status-default.png" />

## Customization Options

The Status Badge can be customized using the following CSS variables:

| CSS Variable                                   | Description & Accepted Values                                |
| ---------------------------------------------- | ------------------------------------------------------------ |
| `--qonto-embed-badge-height`                   | Accepts any valid CSS height value (e.g., `24px`, `1.5em`).  |
| `--qonto-embed-badge-font-size`                | Accepts any valid font size value (e.g., `14px`, `1em`).     |
| `--qonto-embed-badge-font-weight`              | Accepts any valid font weight (e.g., `400`, `bold`).         |
| `--qonto-embed-badge-font-color`               | Accepts any valid color value (e.g., `#000`, `rgb(0,0,0)`).  |
| `--qonto-embed-badge-font-color-neutral`       | Accepts any valid color value for neutral status.            |
| `--qonto-embed-badge-font-color-success`       | Accepts any valid color value for success status.            |
| `--qonto-embed-badge-font-color-warning`       | Accepts any valid color value for warning status.            |
| `--qonto-embed-badge-font-color-error`         | Accepts any valid color value for error status.              |
| `--qonto-embed-badge-background-color`         | Accepts any valid background color value.                    |
| `--qonto-embed-badge-background-color-neutral` | Accepts any valid background color for neutral status.       |
| `--qonto-embed-badge-background-color-success` | Accepts any valid background color for success status.       |
| `--qonto-embed-badge-background-color-warning` | Accepts any valid background color for warning status.       |
| `--qonto-embed-badge-background-color-error`   | Accepts any valid background color for error status.         |
| `--qonto-embed-badge-border`                   | Accepts any valid CSS border value (e.g., `1px solid #ccc`). |
| `--qonto-embed-badge-border-radius`            | Accepts any valid border-radius value (e.g., `4px`, `50%`).  |
| `--qonto-embed-badge-icon-color`               | Accepts any valid color value for the icon.                  |

<Info>
  There are some aspects of the component that cannot be customized, such as the
  icon used for each status type.
</Info>

### Example

This example shows a customized Status Badge that departs from the default Qonto styling:

```css theme={null}
:root {
  --qonto-embed-badge-height: 22px;
  --qonto-embed-badge-font-size: 12px;
  --qonto-embed-badge-font-color: #383633;
  --qonto-embed-badge-font-color-neutral: #383633;
  --qonto-embed-badge-font-color-success: #5bbd59;
  --qonto-embed-badge-font-color-warning: #a67507;
  --qonto-embed-badge-font-color-error: #e60029;
  --qonto-embed-badge-background-color: transparent;
  --qonto-embed-badge-background-color-neutral: #f5f2f0;
  --qonto-embed-badge-background-color-success: #ebf7ea;
  --qonto-embed-badge-background-color-warning: #ffe5aa;
  --qonto-embed-badge-background-color-error: #fff2f5;
  --qonto-embed-badge-border: 1px solid transparent;
  --qonto-embed-badge-border-radius: 16px;
}
```

The result is a badge with a more rounded appearance, lighter background colors, and a different color scheme for the
text and icons, as shown below:

<img src="https://mintcdn.com/qonto-6237c309/5g3taSVWo_yYBcHH/api-reference/sdk-libraries/doc-pages/img/badge-status-customized.png?fit=max&auto=format&n=5g3taSVWo_yYBcHH&q=85&s=1e3bce8ce89100c1815eccb18524e085" alt="Customized badge style" width="582" height="53" data-path="api-reference/sdk-libraries/doc-pages/img/badge-status-customized.png" />