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:

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.

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:

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

​Default Styling

​Customization Options

​Example

Default Styling

Customization Options

Example