Badges¶

Usage¶

Pill badge¶

Badges can display text or numbers, and may also include an icon. Choose between two visual styles: Default or Emphasis.

• Pill badges with text are usually integrated inside the data-tables and depicts each row's recent status.
• Used in conjunction with a single item or row to avoid ambiguity about which item is indicated.
• Pill badges can extend the width to fit desired text or numbers.
• Pill badges can also be used to indicate new or unread items with numbers.
• In case of a counter, the maximum count should be limited to 2 digits plus 1 character. For example 99+.
• Status based categories are Default, Secondary, Inverse, Information, Success, Caution, Warning, Danger and Critical.

Best practices¶

• Consider the specified alignments while using Pill badges within the data-tables.
• Use status based categories to notify about a particular type of notification.
• Do not display status description in a badge.
• While showing a count, use integer numbers.
• If required, use tooltips for numbered badges to enhance user understanding.
• Place badges appropriately to identify the object they are informing or labelling.
• It is not recommended to use icons which are conflicting with semantic status color.

Red dot tag with count¶

• These are global badges conveying a count and not a status.
• Use these to provide a visual cue of an object by notifying the recent changes.
• Maximum character count should be limited to 3 characters, i.e 99+.

Best practices¶

• Use only natural numbers.
• Adjust the width to accommodate multiple digit numbers.
• Do not include text characters inside the badge.

Red dot tag¶

• The red dot symbolizes a global notification update.
• If there is no content inside badge it can be represented with a simple dot.

Best practices¶

• Do not completely overlap the icon.
• Must be properly aligned to the upper right of the bounding box of the icon.
• Do not position badge out of the parent bounding box.

Design¶

Color variations - table¶

Code¶

Usage¶

import { SiBadgeComponent } from '@siemens/element-ng/badge';

@Component({
  template: `<si-badge type="success" icon="element-validation-success">Success</si-badge>`,
  imports: [SiBadgeComponent, ...]
})

Background colors¶

To set a badge's background color, choose between the following status tokens:

For a more prominent appearance use tokens with the -emphasis postfix.

<!-- Angular component -->
<si-badge type="critical-emphasis">Critical</si-badge>

Native HTML markup¶

There are also various badge CSS classes you can use on native HTML elements: badge, badge-dot, and badge-text.

To set a badge's background color apply the .bg-{status token} utility classes:

<div role="status" class="badge bg-critical-emphasis">Critical</div>

The badge-dot class provides a smaller dot that can be placed at the side of an icon:

<i role="status" aria-label="notifications" class="icon element-alarm-filled badge-dot"></i>

The badge-text class provides the ability to apply a short text at the side of an icon:

<div role="status" aria-label="More than 99 notifications">
  <i class="icon element-alarm-filled"></i>
  <span class="badge-text" aria-hidden="true">99+</span>
</div>

Accessibility considerations¶

Badges can confuse users of screen readers and other assistive technologies because these users only hear the badge's content, not its visual styling. To a screen reader, a badge may sound like a random word or number tacked onto the end of a sentence, link, or button, which obscures its intended purpose.

Unless the context is clear - you should add extra, descriptive text that is visually-hidden but available to screen readers.

Examples¶

SiBadgeComponent API Documentation¶

Input Properties¶

Types Documentation¶