Waffles - Notification

Usage guidance

Notification informs users about various updates or changes to the page they are on. They are visually distinct from the page to ensure they stand out and catch user attention, and should be quick to read and understand, avoiding the use of jargon. They should contain brief contextual information so the user can understand what the Notification is about and what actions they can take, if necessary. While it is an effective method of communication, it is rather disruptive and should be used sparingly.

By default, a Notification does not dismiss automatically. To make it dismissible, and to show a close button, provide the closeable prop.

Custom follow-up actions, which should take the user to a page or flow related to the message itself, can be defined via action with the Notification.ActionButton subcomponent. Clearly describe the action, and limit the label to one or two words.

The Notification comes in five different variants: info, success, warning, error, and upgrade.

Notification is also available in two different sizes: medium and large. In most cases, the default value should be used. When using size="large" you must also set the size for the non-namespaced child components, such as Link.

Modes

Inline

Notifies users of the status of an application. It usually appears at the start of the relevant content area or close to the section needing attention. It should be separated from other content by at least tokens.spacing.small.

Banner

Communicates an important system-wide message. It should be placed at the top of the page. It expands to fill the full width of the container.

Content

Because Notification provides limited space for content, it must be concise, and short. It should be easily scannable. Whenever possible communicate the main message using just the title. For description avoid repeating or paraphrasing the title, and limit it to 2 or 3 sentences. Although it is preferred to define any actions via action, it is also possible to include Links within the description that redirect the user to relevant content.

Best practices

Examples

Basic usage

Banner

Variants

Sizes

Closable

With custom action

Custom close button

Playground

import { Notification } from '@datacamp/waffles/notification';

function Playground() {
  return (
    <Notification
      title="Short notification title"
      description="Keep the title and description as short as possible."
      variant="info"
      closable
    />
  );
}

import { Notification } from '@datacamp/waffles/notification';

function Playground() {
  return (
    <Notification
      title="Short notification title"
      description="Keep the title and description as short as possible."
      variant="info"
      closable
    />
  );
}

Live

Props

Notification

In addition to the props listed below, Notification accepts all props from React.HTMLAttributes<HTMLDivElement>, except: title.

Name	Type	Description
`action`	`JSX.Element`	Custom Notification action. Use `Notification.ActionButton` subcomponent. Must be a single element.
`closable`	`boolean`	Shows a close button, and the Notification can be dismissed by a user. Default: `false`
`closeButtonOverride`	`JSX.Element`	Custom close button component. In general use `Notification.CloseButton` subcomponent.
`description`	`React.ReactNode`	Supportive content to display below the title.
`inverted`	`boolean`	Sets the style of the Notification suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`mode`	`bannerinline`	Whether to display the Notification as a banner or as an inline content. Default: `inline`
`onClose`	`() => void`	Handler called when the Notification will close.
`size`	`largemedium`	Defines the size of the Notification. In most cases, the default size should be used. Default: `medium`
`title`Required	`React.ReactNode`	The main content of the Notification.
`variant`	`errorinfosuccessupgradewarning`	Defines the type of Notification. Default: `info`

Notification.ActionButton

Name	Type	Description
`as`	`React.ElementType`	The element used to render this component, e.g. `a` or react router `Link`.
`children`Required	`React.ReactNode`	The content inside the Button. Most of the time should be a plain text.
`iconLeft`	`JSX.Element`	An icon displayed to the left. Could be any Icon from Waffles (use default size) or a custom component.
`iconRight`	`JSX.Element`	An icon displayed to the right. Could be any Icon from Waffles (use default size) or a custom component.

Notification.CloseButton

In addition to the props listed below, Notification.CloseButton accepts all props from React.HTMLAttributes<HTMLButtonElement>, except: children.

Name	Type	Description
`aria-label`	`string`	Optional override for the close button accessible label. Default: `Close`
`size`	`indexedAccess`	—

Imports

You can import the following components, utilities or types from this module:

import { Notification } from '@datacamp/waffles/notification';
import type { NotificationProps, ActionButtonProps, CloseButtonProps } from '@datacamp/waffles/notification';