Notification

deliver transparent clarity for task and system statuses

The Notification component is a work-in-progress. This page is focused on the first iteration of Notifications, which is mainly the Toast Notification. We are currently exploring and ideating on banners, badging, bells, and inline, global and system notifications to include in future versions.

Toast Notifications

Toast notifications are used to communicate low severity level information to users in an unobtrusive way. They should be used sparingly to display low attention messages and statuses that do not require user action.

If there are multiple toast notifications, you should deal with them by having only one toast present at a time. Once the first toast is dismissed or timed out, the next one should appear.

Props

message

A custom message displayed under the title. Provides more information about the Notification.

string

"You were signed out due to inactivity."

onClose

Click handler. Not setting this property causes the Notification to not have a close button.

function

(...args: any[]) => any

status

An indicator that relays the current status of a Notification.

string

"unknown"

"normal"

"warning"

"critical"

title

A string that represents the title of a Notification.

string

"Your session has expired."

toast

A boolean flag that indicates whether or not the Notification is a Toast Notification.

boolean

true

false

Theme

notification.close.color

The color of the close button icon.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

notification.close.icon

The default close button icon.

node

<FormClose />

<Icon />

SVG

<svg>...</svg>

notification.container

Any valid Box prop for the Notification container.

object

'background.color' is used for the container color.


{
    pad: { horizontal: 'small', vertical: 'xsmall' },
    background: {
        color: 'background-front',
    }
}

notification.critical.color

The color of the critical status icon.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

notification.critical.icon

The default icon for a critical status Notification.

node

<StatusCriticalSmall />

<Icon />

SVG

<svg>...</svg>

notification.iconContainer

Any valid Box prop for the icon container.

object


{
    pad: { right: 'small' },
}

notification.message

Any valid Text prop for the message text.

object

'color' is used for the message color.

"text"

notification.normal.color

The color of the normal status icon.

string

A hex, name, or rgb value.

"status-ok"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

notification.normal.icon

The default icon for a normal status Notification.

node

<StatusGoodSmall />

<Icon />

SVG

<svg>...</svg>

notification.textContainer

Any valid Box prop for the text container.

object


{
    gap: 'medium'
}

notification.title

Any valid Text prop for the title text.

object

'color' is used for the text color and 'weight' for the weight of the title.


{
    weight: 'bold',
    color: 'text'
}

notification.toast.container

Any valid Box prop for the Toast Notification container.

object

'width' is used for the default width of a Toast Notification.


{
    elevation: 'medium',
    round: 'xsmall',
    width: 'medium'
}

notification.toast.layer

Any valid Layer prop for the Toast Notification layer.

object

'position' is used for the default positioning of a Toast Notification.


{
    position: 'top',
    margin: 'medium',
}

notification.toast.time

The time duration of a Toast Notification.

number

The value is in milliseconds (ms).

notification.unknown.color

The color of the unknown status icon.

string

A hex, name, or rgb value.

"status-unknown"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

notification.unknown.icon

The default icon for an unknown status Notification.

node

<StatusUnknownSmall />

<Icon />

SVG

<svg>...</svg>

notification.warning.color

The color of the warning status icon.

string

A hex, name, or rgb value.

"status-warning"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

notification.warning.icon

The default icon for a warning status Notification.

node

<StatusWarningSmall />

<Icon />

SVG

<svg>...</svg>