atomic-result-badge

This is for:

Developer
In this article

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>

Properties

Property Attribute Description Type Default

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

Slots

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

Slot Description

default

The element(s) to display inside the badge, instead of a field or label.

Shadow Parts

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.