Badge

<tpg-badge></tpg-badge>

Badges describe the condition the state, status or generally more information about the system and its functions. They can be used in the UI as well as on media or map when the “media_elevation” property is active.

They come in 6 sizes and have the same a style and content properties:

• XXSmall
• XSmall
• Small
• Medium
• Large
• XLarge

Examples

Component

Vanilla JS

    <tpg-badge
      id="the-badge"
      type="BADGE_TYPE"
      emphasis="BADGE_EMPHASIS"
      size="BADGE_SIZE"
      label="Text"
      top-label="Title"
      secondary-label="km"
    ></tpg-badge>

    <script>
      const badge = document.getElementById('the-badge');
      badge.leadingIconTemplate = tpgPlaceholderCustom;
      badge.trailingIconTemplate = tpgPlaceholderCustom;
    </script>

React

    <tpg-badge
      type="BADGE_TYPE"
      emphasis="BADGE_EMPHASIS"
      size="BADGE_SIZE"
      label="Text"
      topLabel="Title"
      secondaryLabel="km"
      leadingIconTemplate={tpgIconPlaceholderCustom}
      trailingIconTemplate={tpgIconPlaceholderCustom}
    ></tpg-badge>

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	Controls the visual type of the badge.	| 'ghost' | 'not-classified' | 'classified' | 'neutral' | 'dynamic' | 'accent' | 'ok' | 'error' | 'warning' | 'danger'	'neutral'
emphasis	emphasis	Dictates badge emphasis, which adjusts background visibility and styling.	| 'no-background' | 'no-background-high' | 'stroke' | 'default' | 'medium' | 'high' | 'hud'	'default'
size	size	Sets the size of the badge.	'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
top-label	topLabel	Top label text displayed above the main text.	string	''
bottom-label	bottomLabel	Bottom label text displayed under the main text.	string	''
left-label	leftLabel	Left label text displayed beside the main text.	string	''
label	label	Main text to be displayed in the badge.	string	''
top-icon-template	topIconTemplate	Top icon name or identifier from IconConstant to appear above left-aligned the main text.	IconConstant | ''	''
leading-icon-template	leadingIconTemplate	Leading icon name or identifier from IconConstant to appear before the text.	IconConstant | ''	''
secondary-label	secondaryLabel	Secondary text displayed alongside the main text.	string	''
trailing-icon-template	trailingIconTemplate	Trailing icon name or identifier from IconConstant to appear after the text.	IconConstant | ''	''
media-elevation	mediaElevation	(Optional) Determines whether a media elevation trend is applied.	boolean	false
full-width	fullWidth	(Optional) Determines whether the badge should hug its content or scale to its parent container width.	boolean	false

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox