Components
Overlay
Notification

Notification

Notifications provide information about status changes, errors, or other important information that requires user attention.

Import statement

import { ToastNotification, NotificationButton, NotificationActionButton, NotificationTextDetails } from "@wfp/react"

Usage ToastNotification

Editable Example

<ToastNotification
  kind="info"
  role="alert"
  title="Notification title"
  subtitle="Subtitle text goes here."
  iconDescription="describes the close button"
  statusIconDescription="describes the status icon"
  hideCloseButton={false}
  caption="00:00:00 AM"
  style={{ minWidth: "30rem", marginBottom: ".5rem" }}
/>;

Example Types

Expand code

Editable Example

<>
  <ToastNotification
    role="alert"
    title="Notification title"
    subtitle="Subtitle text goes here."
    iconDescription="describes the close button"
    statusIconDescription="describes the status icon"
    hideCloseButton={false}
    caption="00:00:00 AM"
    kind="success"
    style={{
      minWidth: "30rem",
      marginBottom: ".5rem",
    }}
  />
  <ToastNotification
    role="alert"
    title="Notification title"
    subtitle="Subtitle text goes here."
    iconDescription="describes the close button"
    statusIconDescription="describes the status icon"
    hideCloseButton={false}
    caption="00:00:00 AM"
    kind="error"
    style={{
      minWidth: "30rem",
      marginBottom: ".5rem",
    }}
  />
  <ToastNotification
    role="alert"
    title="Notification title"
    subtitle="Subtitle text goes here."
    iconDescription="describes the close button"
    statusIconDescription="describes the status icon"
    hideCloseButton={false}
    caption="00:00:00 AM"
    kind="warning"
    style={{
      minWidth: "30rem",
      marginBottom: ".5rem",
    }}
  />
  <ToastNotification
    kind="info"
    role="alert"
    title="Notification title"
    subtitle="Subtitle text goes here."
    iconDescription="describes the close button"
    statusIconDescription="describes the status icon"
    hideCloseButton={false}
    caption="00:00:00 AM"
    style={{
      minWidth: "30rem",
      marginBottom: ".5rem",
    }}
  />
</>;

On this page

References