Skip to content

SiStatusBarComponent documentation

selector
si-status-bar

The status bar is the main component within an application to inform users at all times about important status information.

Input Properties

Name Type Default Description
allOkText
TranslatableString $localize`:@@SI_STATUS_BAR.ALL_OK:All OK` Text/translation key for "All OK" status in mobile
boolean false When true, items with a value have a blinking background
blinkPulse
Observable<boolean> blink pulse generator for synchronized blinking with other components
compact
boolean false compact mode
items
Required
StatusBarItem[] Array of status bar items.
muteButton
boolean State of the mute button. Set to undefined for no button.
muteButtonText
TranslatableString $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute` Text/translation key on mute button for screen reader
toggleButtonText
TranslatableString $localize`:@@SI_STATUS_BAR.TOGGLE:Toggle` Text for the toggle button that expands/collapses the status bar. Required for a11y. The expanded/collapsed state is communicated separately via aria-expanded .

Output Properties

Name Type Description
muteToggle
void Emitted when the mute toggle button is clicked

Types Documentation

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.
Properties
Function to call when the item is clicked.
action?: (item: StatusBarItem) => void
Custom color as CSS value if status is not specified
Deprecated: use the semantic status input instead.

color?: string
Status of the item. If not specified, specify color
status?: ExtendedStatusType
A descriptive title
title: string
The value to show. 0 or '' means greyed out
value: (string | number)
("success" | "info" | "warning" | "danger" | "caution" | "critical")

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