atomic-result-badge

This is for:

Developer

In this article

Properties
Shadow Parts

The atomic-result-badge element renders a badge containing a field.

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type
`field`	`field`	The result field which the component should use. This will look in the Result object first, and then in the Result.raw object for the fields. It is important to include the necessary field in the ResultList component.	`string \| undefined`
`icon`	`icon`	Specifies the icon to display. 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 instead of the field.	`string \| undefined`

field

The result field which the component should use. This will look in the Result object first, and then in the Result.raw object for the fields. It is important to include the necessary field in the ResultList component.

string | undefined

icon

Specifies the icon to display.

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 instead of the field.

string | undefined

Shadow Parts

Part Description

Part	Description
`result-badge-element`	The badge element with the background color and text color.
`result-badge-icon`	The optional icon displayed in the badge element.
`result-badge-label`	The optional icon displayed in the badge element.

result-badge-element

The badge element with the background color and text color.

result-badge-icon

The optional icon displayed in the badge element.

result-badge-label

The optional icon displayed in the badge element.