---
title: QuanticColoredResultBadge
slug: latest-result-template-colored-result-badge
canonical_url: https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-colored-result-badge/
collection: quantic
source_format: adoc
---
# QuanticColoredResultBadge

> **Note**
>
> This component was introduced in version `1.41.0`.

The `QuanticColoredResultBadge` component displays a colored badge showing a label.

## Example

```html
<c-quantic-colored-result-badge label="Case"></c-quantic-colored-result-badge>
```

## Properties

--
|===
| Property | Attribute | Description | Type | Default

| `label` _(required)_
| `label`
a| The label to display.
| `string`
|

| `result` _(required)_
| `result`
a| The [result item](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Result.html) to use. Will be ignored if label is provided.
| `Result`
|

| `field` _(required)_
| `field`
a| The field name whose values you want to display. Will be ignored if label is provided.
| `string`
|

| `color` _(required)_
| `color`
a| The primary color of the badge.
| `string`
|

|===
--

## XML configuration file elements

The following XML configuration file elements apply (see [XML Configuration File Elements](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags)).

--
|===
| Metadata | Value

| `apiVersion` | `55.0`
| `isExposed` | `false`
|===
--