Inline notification¶

Usage¶

When to use¶

• Use inline notifications to show quick and precise feedback or status during the task flows.
• Use to notify status or feedback based on information, warning, success and danger.
• Usual places its usage are input fields like forms to show errors etc.

Best practices¶

• Messaging should be context-based, short and concise.
• Do not overlap rest of the content.
• These are scrollable along with the other content on the screen.

Formatting¶

The notification width varies based on the context and page layout. Their height is based on the content length, which should not exceed two lines of text. Some examples of layouts are form, right pane, banner etc.

Design¶

1. Icon: Informs users about the severity of a notification.
2. Title: Gives users a quick overview of the notification (optional).
3. Body Content: Provides additional details of the notification.
4. Action Button: Area to take actions like canceling or resolving a notification (optional).

Title and body content¶

A user should be able to quickly understand the notification and know what to do next.

Action button¶

1. No action: Information only.
2. Action: Provides an action button.

Notification types¶

Code¶

This component is used to bring attention of users to a result of some action. There are multiple options of what is the notification level: information, success, caution, warning, danger and critical.

Usage¶

import { SiInlineNotificationComponent } from '@siemens/element-ng/inline-notification';

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

SiInlineNotificationComponent API Documentation¶

Input Properties¶

Name	Type	Default	Description
action ¶	Link		Optional link action for inline notification events.
embedded ¶	boolean	false	Displays in embedded style, w/o radius and indicator bar
heading ¶	string		Heading of the message.
message ¶	string		Main message of this inline notification.
severity ¶	StatusType		Status of inline notification.
translationParams ¶	(undefined | { [ key: string ]: any } })	{}	Params passed to the translation pipe

Types Documentation¶