System banner¶

Usage¶

The system banner is placed above the a application header to highlight important system-wide messages. It supports various status types, including information, success, caution, warning, danger and critical.

When to use¶

• To inform users about critical updates or changes.
• To notify users of any errors or issues.
• To provide important notifications, such as maintenance schedules or security alerts.

Best practices¶

• Keep messages brief and easy to understand.
• Use clear, simple language. Avoid jargon and technical terms.
• Limit system banners to essential information to prevent clutter.
• Display system banners only when relevant to the user's context.

Design¶

Elements¶

1. Background, 2. Text message

Variants¶

Code¶

Usage¶

import { SiSystemBannerComponent } from '@siemens/element-ng/system-banner';

@Component({
  imports: [SiSystemBannerComponent, ...]
})

<si-system-banner message="This is an information" [status]="'info'"/>

Displaying a system banner above the application header¶

To display a system banner above the application header, the following CSS classes must be applied:

• add has-system-banner on wrapper div which also contains has-application-header or has-navbar-fixed-top
• add fixed-top on si-system-banner

System banner with different statuses¶

SiSystemBannerComponent API Documentation¶

The system banner component displays a message with specific status as background. Use this component for displaying system level messages on top of the page.

Input Properties¶

Name	Type	Default	Description
message ¶	TranslatableString		Message to be displayed in the system banner.
status ¶	ExtendedStatusType	'info'	Status of the system banner. Possible values are 'info', 'success', 'warning', 'caution', 'danger', 'critical'.

Types Documentation¶