Skip to main content
Contact us

Notification

A notification communicates to a user timely or important information.

Figma

Storybook

Anatomy

The notification component is made up of five elements.

  1. Container
  2. Icon slot
  3. Default slot
  4. Dismiss icon slot
  5. Action slot

Variants

Type

Alert

Alerts appear as block-level elements anywhere within the normal flow of content.

An informational alert is positioned within a card's internal padding underneath the header and above the body content.

Banners are able to break out of the standard flow and go edge-to-edge within a container, even if padding is applied. Banners can 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.

An informational banner is positioned at the top of a dashboard mockup and spans the entire represented viewport.

Appearance

Neutral

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

The informational message

Positive

Positive notifications are used in contexts that convey a positive connotation such as approved, complete, and deposited.

The affirmative message

Negative

Negative notifications are used in contexts that convey a negative connotation such as error, alert, or rejected.

The error message

Icon

A user-customizable icon can be paired with the text for increased visual emphasis.

An

Dismiss button

An icon-only dismiss button can be enabled in the top-right to clear the notification. The icon is user-customizable.

Action buttons

A series of buttons can be placed side-by-side within the notification to provide the user contextual actions.

A negative alert with the message

Stacked

By default, action buttons are in line with the text. However, they can be stacked below the text in situations where either the text or the button label is relatively long.

A negative alert with the message

Behavior

Text overflow

The default slot expands to fill the available space of the notification container not already taken up by the action buttons and dismiss button. Within the default slot, text wraps to form another line when it is too long for the available space.

Component tokens

The following component tokens are available for customizing the notification component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

  • jh-notification-color-text-neutral
    The notification text color when `appearance="neutral"`.
    Default value
    jh-color-content-on-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-color-text-positive
    The notification text color when `appearance="positive"`.
    Default value
    jh-color-content-on-positive-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-color-text-negative
    The notification text color when `appearance="negative"`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-color-background-neutral
    The notification background color when `appearance="neutral"`.
    Default value
    jh-color-content-primary-enabled
    Computed value
    rgb(42, 44, 46)
  • jh-notification-color-background-positive
    The notification background color when `appearance="positive"`.
    Default value
    jh-color-content-positive-enabled
    Computed value
    rgb(59, 111, 45)
  • jh-notification-color-background-negative
    The notification background color when `appearance="negative"`.
    Default value
    jh-color-content-negative-enabled
    Computed value
    rgb(189, 33, 19)
  • jh-notification-icon-color-fill-neutral
    The icon fill color when `appearance="neutral"`.
    Default value
    jh-color-content-on-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-icon-color-fill-positive
    The icon fill color when `appearance="positive"`.
    Default value
    jh-color-content-on-positive-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-icon-color-fill-negative
    The icon fill color when `appearance="negative"`.
    Default value
    jh-color-content-on-negative-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-dismiss-color-background-enabled
    The dismiss button background color.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-dismiss-color-background-focus
    The dismiss button background color when focused.
    Default value
    jh-color-content-inverse-hover
    Computed value
    rgb(240, 245, 249)
  • jh-notification-dismiss-color-background-hover
    The dismiss button background color when hovered.
    Default value
    jh-color-content-inverse-hover
    Computed value
    rgb(240, 245, 249)
  • jh-notification-dismiss-color-background-active
    The dismiss button background color when activated.
    Default value
    jh-color-content-inverse-active
    Computed value
    rgb(231, 236, 240)
  • jh-notification-dismiss-color-border-enabled
    The dismiss button border color.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-dismiss-color-border-focus
    The dismiss button border color when focused.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-dismiss-color-border-hover
    The dismiss button border color when hovered.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-dismiss-color-border-active
    The dismiss button border color when activated.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-dismiss-icon-color-enabled
    The dismiss button icon fill color.
    Default value
    jh-color-content-inverse-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-dismiss-icon-color-focus
    The dismiss button icon fill color when focused.
    Default value
    jh-color-content-on-inverse-hover
    Computed value
    rgb(0, 0, 0)
  • jh-notification-dismiss-icon-color-hover
    The dismiss button icon fill color when hovered.
    Default value
    jh-color-content-on-inverse-hover
    Computed value
    rgb(0, 0, 0)
  • jh-notification-dismiss-icon-color-active
    The dismiss button icon fill color when activated.
    Default value
    jh-color-content-on-inverse-active
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-color-background-enabled
    The action button(s) background color.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-color-background-focus
    The action button(s) background color when focused.
    Default value
    jh-color-content-inverse-hover
    Computed value
    rgb(240, 245, 249)
  • jh-notification-action-color-background-hover
    The action button(s) background color when hovered.
    Default value
    jh-color-content-inverse-hover
    Computed value
    rgb(240, 245, 249)
  • jh-notification-action-color-background-active
    The action button(s) background color when active.
    Default value
    jh-color-content-inverse-active
    Computed value
    rgb(231, 236, 240)
  • jh-notification-action-color-background-pending
    The action button(s) background color when pending.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-color-border-enabled
    The action button(s) border color.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-color-border-focus
    The action button(s) border color when focused.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-color-border-hover
    The action button(s) border color when hovered.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-color-border-active
    The action button(s) border color when active.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-color-border-pending
    The action button(s) border color when pending.
    Default value
    transparent
    Computed value
    transparent
  • jh-notification-action-icon-color-fill-enabled
    The action button(s) icon fill color.
    Default value
    jh-color-content-inverse-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-action-icon-color-fill-focus
    The action button(s) icon fill color when focused.
    Default value
    jh-color-content-on-inverse-hover
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-icon-color-fill-hover
    The action button(s) icon fill color when hovered.
    Default value
    jh-color-content-on-inverse-hover
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-icon-color-fill-active
    The action button(s) icon fill color when active.
    Default value
    jh-color-content-on-inverse-active
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-label-color-text-enabled
    The action button(s) text color.
    Default value
    jh-color-content-inverse-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-notification-action-label-color-text-focus
    The action button(s) text color when focused.
    Default value
    jh-color-content-on-inverse-hover
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-label-color-text-hover
    The action button(s) text color when hovered.
    Default value
    jh-color-content-on-inverse-hover
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-label-color-text-active
    The action button(s) text color when active.
    Default value
    jh-color-content-on-inverse-active
    Computed value
    rgb(0, 0, 0)
  • jh-notification-action-progress-color-border-pending
    The action button(s) progress indicator color when pending.
    Default value
    jh-color-content-inverse-enabled
    Computed value
    rgb(255, 255, 255)

Border

  • jh-notification-border-radius-alert
    The notification border-radius when `type="alert"`.
    Default value
    jh-border-radius-100
    Computed value
    4px
  • jh-notification-border-radius-banner
    The notification border-radius when `type="banner"`.
    Default value
    jh-border-radius-0
    Computed value
    0

Shadow

  • jh-notification-dismiss-shadow-neutral-focus
    The dismiss button box shadow when focused and `appearance="neutral"`.
    Default value
    0px 0px 0px 1px jh-color-content-primary-enabled, 0px 0px 0px 3px jh-color-content-inverse-hover
    Computed value
    0px 0px 0px 1px rgb(42, 44, 46), 0px 0px 0px 3px rgb(240, 245, 249)
  • jh-notification-dismiss-shadow-positive-focus
    The dismiss button box shadow when focused and `appearance="positive"`.
    Default value
    0px 0px 0px 1px jh-color-content-positive-enabled, 0px 0px 0px 3px jh-color-content-inverse-hover
    Computed value
    0px 0px 0px 1px rgb(59, 111, 45), 0px 0px 0px 3px rgb(240, 245, 249)
  • jh-notification-dismiss-shadow-negative-focus
    The dismiss button box shadow when focused and `appearance="negative"`.
    Default value
    0px 0px 0px 1px jh-color-content-negative-enabled, 0px 0px 0px 3px jh-color-content-inverse-hover
    Computed value
    0px 0px 0px 1px rgb(189, 33, 19), 0px 0px 0px 3px rgb(240, 245, 249)
  • jh-notification-action-shadow-neutral-focus
    The action button(s) box shadow when focused and `appearance="neutral"`.
    Default value
    0px 0px 0px 1px jh-color-content-primary-enabled, 0px 0px 0px 3px jh-color-content-inverse-hover
    Computed value
    0px 0px 0px 1px rgb(42, 44, 46), 0px 0px 0px 3px rgb(240, 245, 249)
  • jh-notification-action-shadow-positive-focus
    The action button(s) box shadow when focused and `appearance="positive"`.
    Default value
    0px 0px 0px 1px jh-color-content-positive-enabled, 0px 0px 0px 3px jh-color-content-inverse-hover
    Computed value
    0px 0px 0px 1px rgb(59, 111, 45), 0px 0px 0px 3px rgb(240, 245, 249)
  • jh-notification-action-shadow-negative-focus
    The action button(s) box shadow when focused and `appearance="negative"`.
    Default value
    0px 0px 0px 1px jh-color-content-negative-enabled, 0px 0px 0px 3px jh-color-content-inverse-hover
    Computed value
    0px 0px 0px 1px rgb(189, 33, 19), 0px 0px 0px 3px rgb(240, 245, 249)

Dependencies

The notification component uses the following components:

Button

Buttons enable a user to initiate a specific action.