> ## 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:

![Default badge style](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/badge-status-default.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=5bb3640d1a973fab1e76cd579b3c6d49)

## 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. |

> [!NOTE]
>
> There are some aspects of the component that cannot be customized, such as the
> icon used for each status type.

### 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:

![Customized badge style](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/badge-status-customized.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=cfd97b9a43d124d7beb618955c5f4f32)