Notification

Notification component contains a brief text directly related to the operation performed or for system messaging. It also may appear in other scenarios when other people are interacting with you (you have been followed, messaged, etc.).

Notification is constructed using an elevated Card and Cell component with navigating type as well as default spacing and specs. It also has the ability to add body and icon or suffix.

Notification

It fills entire parent container horizontally.

Hi, I'm a notification and I have an important message!

Notification with icon

Notification can only display default sized Icon component in the left side of the container.

Hi, I'm a notification with prefix icon!

Notification suffix can contain any component

Notification with icon in suffix

Hi, I'm a notification with suffix icon!

Notification with text in suffix

Hi, I'm a notification with suffix text!
Suffix

Pseudo-code:

<notification>
  <notification-icon>
    <icon />
  </notification-icon>
  <notification-body>
    <text />
  </notification-body>
  <notification-suffix>
    <text />
    <icon />
  </notification-suffix>
</notification>

API

name type default
iconName string ’’
body string ’’
suffix any ’’