---
title: "Status Badge"
slug: "status-badge-filter"
updated: 2026-04-17T07:43:18Z
published: 2026-04-17T07:43:18Z
canonical: "learn.servitly.com/status-badge-filter"
---

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

# Status Badge

It renders a status string within a colored badge.

![Status Badge](https://components-manager.servitly.com/components/StatusBadge_1/IMAGES/_screenshot?owner=AG_Servitly)

This filter uses the color palette to generate a colored badge depending on the displayed value.

Values that are not registered will be associated with a random color that will be used for the rest of the navigation.

The value text before being printed within the colored badge is localized according to the user language.

Without this filter, the values of metrics/properties are printed as they are according to the underlying value type, for instance:

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/noFilter(3).png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

By default the filter recognizes and formats the following values.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/OFFLINE.png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/STANDBY.png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/WARMUP.png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/READY.png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/WORKING.png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/FAILURE.png?sv=2026-02-06&spr=https&st=2026-10-16T18%3A19%3A18Z&se=2026-10-16T19%3A19%3A18Z&sr=c&sp=r&sig=AukJHTKQfdL6WPtpT%2FfW6vn5yyBlfH0mVd6VctXQKuM%3D)

New associations between values and colors can be defined through the [ColorManager](/v1/docs/color-manager) that can be used into the [Custom Filters](/docs/custom-filters) component.

```javascript

        colorManager.registerColor("VALUE 1", "#AABBCC");
        colorManager.registerColor("VALUE 2", "#A1B2C3");
    
```

# Filter Variants

The set of predefined filter variants that can be used to format values.

| *Status Badge* | Prints out the given value within a colored badge. **Name**: *statusBadge* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING, BOOLEAN* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/StatusBadge_1/IMAGES/variants/statusBadge/_image?owner=AG_Servitly) |
| --- | --- |