LUCI Design System


Notification - Information (Default)

Notification - Warning

Notification - Success

Notification - Error


Notification - Information (Default) - Heading only

Notification - Warning - Heading only

Notification - Success - Heading only

Notification - Error - Heading only


Notification - Information (Default) - Description only

Notification - Warning - Description only

Notification - Success - Description only

Notification - Error - Description only


Notification - Information (Default) with Close

Information! This is a heading.
This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Warning with Close

Warning! This is a heading.
This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Success with Close

Success! This is a heading.
This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Error with Close

Error! This is a heading.
This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Information (Default) with Close - Heading only

Information! This is a heading.

Notification - Warning with Close

Warning! This is a heading.

Notification - Success with Close

Success! This is a heading.

Notification - Error with Close

Error! This is a heading.

Notification - Information (Default) with Close - Description only

This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Warning with Close

This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Success with Close

This is a global notification about something that has occured in the system. This message applies to the entire system.

Notification - Error with Close

This is a global notification about something that has occured in the system. This message applies to the entire system.

Inline Notification - Information (Default)

Inline Notification - Warning

Inline Notification - Success

Inline Notification - Error


Inline Notification - Information (Default) - Heading only

Inline Notification - Warning

Inline Notification - Success

Inline Notification - Error


Inline Notification - Information (Default) Description only

Inline Notification - Warning

Inline Notification - Success

Inline Notification - Error


Toast Notification - Information (Default)

Toast Notification - Success


Toast Notification - Information (Default) - Heading only

Toast Notification - Success


Toast Notification - Information (Default) - Description only

Toast Notification - Success


Toast Notification - Information (Default) with Close

Information! This is a heading.
This is a toast notification about something that has occured in this context. I auto-expire and disappear.

Toast Notification - Success with Close

Success! This is a heading.
This is a toast notification about something that has occured in this context. I auto-expire and disappear.

Toast Notification - Information (Default) with Close - Heading only

Information! This is a heading.

Toast Notification - Success with Close

Success! This is a heading.

Toast Notification - Information (Default) with Close - Description only

This is a toast notification about something that has occured in this context. I auto-expire and disappear.

Toast Notification - Success with Close

This is a toast notification about something that has occured in this context. I auto-expire and disappear.