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

​
Customization Options

The Status Badge can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-badge-heightAccepts any valid CSS height value (e.g., 24px, 1.5em).
--qonto-embed-badge-font-sizeAccepts any valid font size value (e.g., 14px, 1em).
--qonto-embed-badge-font-weightAccepts any valid font weight (e.g., 400, bold).
--qonto-embed-badge-font-colorAccepts any valid color value (e.g., #000, rgb(0,0,0)).
--qonto-embed-badge-font-color-neutralAccepts any valid color value for neutral status.
--qonto-embed-badge-font-color-successAccepts any valid color value for success status.
--qonto-embed-badge-font-color-warningAccepts any valid color value for warning status.
--qonto-embed-badge-font-color-errorAccepts any valid color value for error status.
--qonto-embed-badge-background-colorAccepts any valid background color value.
--qonto-embed-badge-background-color-neutralAccepts any valid background color for neutral status.
--qonto-embed-badge-background-color-successAccepts any valid background color for success status.
--qonto-embed-badge-background-color-warningAccepts any valid background color for warning status.
--qonto-embed-badge-background-color-errorAccepts any valid background color for error status.
--qonto-embed-badge-borderAccepts any valid CSS border value (e.g., 1px solid #ccc).
--qonto-embed-badge-border-radiusAccepts any valid border-radius value (e.g., 4px, 50%).
--qonto-embed-badge-icon-colorAccepts 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: Customized badge style