Skip to content

Status toggle

A status toggle allows a user to quickly set a status by tapping (primary action) on the desired status. Tap and drag to change the status (secondary-action) is also supported.

Usage

A status toggle is a good way to directly set a status on a screen, e.g. the result of a datapoint-test, home/away state, etc.

Status toggle

Status toggle examples

Best practices

  • In order to access it quickly, a status toggle should remain visible on the screen and not be part of the scrolling area.
  • A status toggle can only hold 2 or 3 states.

Design

Elements

Status toggle specification

  1. Icon, 2. Label, 3. Selected state, 4. Unselected state

Label

  • The label describes the state.
  • Labels are concise and use no more than two words.
  • The label will be truncated with 3 dots, if there is not enough space.
  • The width of a label depends on the number of states.

Code

SiStatusToggleComponent API Documentation

selector
si-status-toggle

Input Properties

Name Type Default Description
disabled
 boolean false Disabled state for the whole component.
items
Required		 StatusToggleItem[] List of status items.
value
 (string | number) Value of currently selected status item.

Output Properties

Name Type Description
itemClick
 (string | number) Emitted when an item is clicked.
valueChange
 (string | number) Value of currently selected status item.

Types Documentation

An item for si-status-toggle.
Properties
Icon shown when the item is active.
activeIcon?: string
Class applied to the icon when the item is selected.
activeIconClass?: string
Stacked icon shown when the item is active.
activeIconStacked?: string
Class applied to the stacked icon when the item is selected.
activeIconStackedClass?: string
Class applied to the text when the item is selected.
activeTextClass?: string
Whether the item is disabled.
disabled?: boolean
Icon displayed for the item.
icon: string
Text displayed for the item.
text: TranslatableString
Value of the item.
value: (string | number)
(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.

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