Skip to content

Summary widget

Summary widgets are more detailed than summary chips and can include an optional icon (representing a category or state), a value, and a label. These components are versatile and can be used to display various types of information, from summarizing data to visualizing current states or conditions.

Usage

Summary widgets can be either selectable or read-only. They may include an icon to visually represent the state or category of the displayed value. Additionally, labels can be added to provide extra context or clarification.

Example: Overview of categories:

Summary widget category

Example: Overview of states:

Summary widget states

  • Visual state representation: Incorporate icons in summary widgets to visually represent the state or category of the displayed value.
  • Detailed summary: Use summary widgets to provide more detailed summaries, including labels and additional context.
  • Readonly information: Present detailed read-only information with clear labels and values.

When to use

Use container component to organize a number of summary widgets or other elements such as buttons, links, and badges. The container can have a background of None, background-0, or background-1.

Summary widget example

Design

Elements

Summary widget construction

  1. Category icon or composite icon (optional), 2. Value, 3. Label
  • Icon: The summary widget can hold an icon or a composite icon representing a state.
  • Value: The primary numerical or textual value being summarized.
  • Label: A short text label providing context or description of the value.

Here an idea of icons representing states:

Summary widget icon states

States

Summary widget states

Code

SiSummaryWidgetComponent API Documentation

selector
si-summary-widget

Input Properties

Name Type Default Description
color
 string Color class, see https://element.siemens.io/fundamentals/typography/#color-variants-classes .
disabled
 boolean false Disabled state.
icon
 string Icon token, see https://element.siemens.io/icons/element .
label
Required		 TranslatableString The label.
readonly
 boolean false Readonly state.
selected
 boolean false Selected state, will change when clicked.
stackedColor
 string Color class, see https://element.siemens.io/fundamentals/icons/ .
stackedIcon
 string Icon token, see https://element.siemens.io/fundamentals/icons/ .
status
 ExtendedStatusType Status. Alternatively, use icon and color .
value
Required		 TranslatableString Value to display.

Output Properties

Name Type Description
selectedChange
 boolean Selected state, will change when clicked.

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
(StatusType | "unknown")
("success" | "info" | "warning" | "danger" | "caution" | "critical")
Properties
ariaLabel?: TranslatableString
background: string
color: string
icon: string
severity: number
stacked: string
stackedColor: string

Except where otherwise noted, content on this site is licensed under MIT License.