Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Notification

A notification communicates to a user timely or important information.

Status: Planned

Anatomy

  1. Container
  2. Icon
  3. Text
  4. Dismiss button
  5. Action button

Variants

Type

Alert (Default)

Alerts honor padding set on their parent container and follow a typical content flow.

Banner

Banners are able to break out of the standard flow and go edge-to-edge within a container, even if padding is applied. They can also be used to make the notification feel more integrated with its parent component or as a way to handle application-wide notifications at the top of the screen.

Toast

Toasts appear in the bottom-left of the viewport to notify a user and can either be manually dismissed or set to auto-dismiss.

Appearance

Neutral (Default)

Neutral banners should be used in contexts that are largely informative and have no positive or negative connotation.

Positive

Positive banners should be used in contexts that convey a positive connotation such as approved, complete, and deposited.

Negative

Negative banners should be used in contexts that convey a negative connotation such as error, alert, or rejected.

Orientation

Inline (Default)

By default, action buttons are in line with the text.

Stacked

The action button can also be stacked below the text in situations where either the text or the button label are relatively long. The stacked variant is only used with action buttons.

Icon

An icon can be paired with the text for increased visual emphasis.

Dismiss

An icon-only close button can be included to dismiss the notification. Dismiss buttons can be displayed alongside action buttons when stacked.

Action

A text-only button can be used to provide the user a contextual action. Action buttons can be displayed alongside dismiss buttons to allow for an action related to the notification such as “Undo” or “Retry.”

None (Default)

Single

A text-only button can be used to provide the user a contextual action.

Double

Banners can accommodate two side-by-side buttons. Other notification types may only display one text button.

Behavior

Dismiss

By default, alerts and banners are dismissed when the user clicks the close button (or a relevant action button). Toasts are set to auto-dismiss after five seconds by default. The user can adjust the timeout that denotes when the toast will dismiss as well as set it to a value that will functionally disable auto-dismiss.

Placement

Alerts and banners

Alerts and banners always appear as block-level elements anywhere within the normal flow of content, and typically appear near the top of the view that provides their context.

A card alert might be placed at the top of the card content area.

An app-wide notification should be placed at the top of the entire UI.

Toasts

Toasts should always appear in the bottom-left corner of the viewport and be consistent across views. When scrolling, toasts should stick to the bottom-left corner position. Avoid obscuring toasts with other elements on the screen.

Multiple toasts vertically stack with the newest notification occupying the bottom-most position. Previous notifications are pushed up maintaining the preset spacing until they are either manually or automatically dismissed.

Max count

A max count can be set to determine the maximum number of toasts that can be displayed at a time. When a toast is added past the max count, the oldest toast at the top of the stack automatically dismisses. The default max count is 3, but can be adjusted.

Max width

Toasts have a max width set by default, but can be adjust as needed. The max width applies to all breakpoints. Alert and banner do not have a max width and expand to the width of the parent container regardless of the length of content within.

Text overflow

Text wraps to form another line when it is too long for the available space.