atomic-result-badge

This is for:

Developer

In this article

Properties
Slots
Shadow parts

Atomic v2 is an older major version. For new implementations, use Atomic v3.

Note

This component was introduced in version 1.0.4.

See Display results to learn more about customizing your result templates.

The atomic-result-badge element renders a badge to highlight special features of a result.

A badge can either display:

Text:

<atomic-result-badge label="trending"></atomic-result-badge>

The contents of a single-value field:

<atomic-result-badge field="objecttype"></atomic-result-badge>

An icon:

<atomic-result-badge icon="https://my-website.fake/star.svg"></atomic-result-badge>

Slotted elements:

<atomic-result-badge icon="https://my-website.fake/stopwatch.svg">
    Deal ends in <my-dynamic-countdown></my-dynamic-countdown>
</atomic-result-badge>

The contents of a multi-value field can be displayed as in the following example:

<atomic-result-badge icon="https://my-website.fake/language.svg">
   <atomic-result-multi-value-text field="language"></atomic-result-multi-value-text>
</atomic-result-badge>

Go to the interactive example

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type
`field`	`field`	The field to display in the badge. Not compatible with `label`, slotted elements nor multi-value fields.	`string \| undefined`
`icon`	`icon`	Specifies an icon to display at the left-end of the badge. This can be used in conjunction with `field`, `label` or slotted elements. Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. Use a value that starts with `assets://`, to display an icon from the Atomic package. Use a stringified SVG to display it directly	`string \| undefined`
`label`	`label`	The text to display in the badge. Not compatible with `field` nor slotted elements.	`string \| undefined`

field

The field to display in the badge.

Not compatible with label, slotted elements nor multi-value fields.

string | undefined

icon

Specifies an icon to display at the left-end of the badge. This can be used in conjunction with field, label or slotted elements.

Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.
Use a value that starts with assets://, to display an icon from the Atomic package.
Use a stringified SVG to display it directly

string | undefined

label

The text to display in the badge.

Not compatible with field nor slotted elements.

string | undefined

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

Slot	Description
`default`	The elements to display inside the badge, instead of a field or label.

default

The elements to display inside the badge, instead of a field or label.

Shadow parts

Part Description

Part	Description
`result-badge-element`	The decorative outer-most element with the background color and text color.
`result-badge-icon`	The icon displayed at the left-end of the badge, if present.
`result-badge-label`	The wrapper around the contents at the right-end of the badge. This may be text, a field or slotted elements depending on which was configured.

result-badge-element

The decorative outer-most element with the background color and text color.

result-badge-icon

The icon displayed at the left-end of the badge, if present.

result-badge-label

The wrapper around the contents at the right-end of the badge. This may be text, a field or slotted elements depending on which was configured.