Notification – Carbon Design System

How to build a notification using React.

Overview
Component API
Feedback
Toast notification
Inline notification

Overview

Carbon Notifications come in two variants: toast, and inline. They are created by using the ToastNotification or InlineNotification components.

Toast notification

You can use the ToastNotification component to display a non–modal, time–based short message that appears at the bottom or the top of the screen.

import { ToastNotification } from "carbon-components-react";
function MyComponent() {
  return (
    <ToastNotification
      caption="00:00:00 AM"
      iconDescription="Dismiss notification"
      subtitle="Notification subtitle"
      timeout={0}

Inline notification

You can use the InlineNotification to notify users of the status of an action. Unlike ToastNotification these appear at the top of the primary content area.

import { InlineNotification } from "carbon-components-react";
function MyComponent() {
  return (
    <InlineNotification
      kind="info"
      iconDescription="Dismiss notification"
      subtitle="Notification subtitle"
      title="Notification title"

Component API

Inline Notification props

Prop	Type	Required	Default	Description
actions	`node`	–	–	Pass in the action nodes that will be rendered inside the notification
children	`node`	–	–	Pass in the children that will be rendered inside the notification
className	`string`	`true`	`error`	Optional class names to be applied to the notification
kind	`string`	`true`	`error`	Specify what state the notification represents: `error`, `success`, `warning`, or `info`
lowContrast	`bool`	–	–	Specify whether you are using the low contrast variant styles
title	`string`	`true`	`provide a caption`	Specify notification title
subtitle	`node`	–		Specify notification subtitle
role	`string`	–	`alert`	Provide an alternative role for the notification
onCloseButtonClick	`function`	–	`() => {}`	Function that is called when notification closes
iconDescription	`string`	`true`	`closes notification`	Provide screen reader accessible description for close icon
statusIconDescription	`string`	–	–	Provide screen reader accessible description for status icon
notificationType	`string`	–	`inline`	Specify the type of the button
hideCloseButton	`bool`	–	`false`	Optional prop to disable the close button

Inline notifications with action button

An inline notification optionally can have a ghost button that allows the user to take further action.

import { InlineNotification } from "carbon-components-react";
function Mycomponent() {
  return (
    <InlineNotification
      kind="info"
      actions={<NotificationActionButton>Action</NotificationActionButton>}
      icondescription="Dismiss notification"
      subtitle="Notification subtitle"

Notification action button props

Prop	Type	Required	Default	Description
classname	`string`	–	–	class name to be applied to the action button
children	`node`	–	–	the content of the notification button
onclick	`function`	–	–	click handler for the notification button

Toast notification props

prop	type	required	default	description
children	`node`	–	–	Pass in the children that will be rendered inside the notification
className	`string`	`true`	–	Optional class names to be applied to the notification
kind	`string`	`true`	`error`	Specify what state the notification represents: ‘error’, ‘info’, ‘success’, ‘warning’
lowContrast	`bool`	–	–	Specify whether you are using the low contrast variant styles
title	`string`	`true`	`provide a title`	Specify notification title
subtitle	`node`	–		Specify notification subtitle
role	`string`	–	`alert`	Provide an alternative role for the notification
caption	`node`	–	`provide a caption`	The caption for the notification
onCloseButtonClick	`function`	–	`() => {}`	The function called when the close button is clicked
iconDescription	`string`	`true`	`closes notification`	Provide screen reader accessible description for close icon
statusIconDescription	`string`	–	–	Provide screen reader accessible description for status icon
notificationType	`string`	–	`toast`	The type of notification
hideCloseButton	`bool`	–	`false`	Optional prop to disable the close button
timeout	`number`	–	`0`	Time until the notification is closed

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Edit this page on GitHub

Notification: Style

Notification: Accessibility