Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Notification

How to build a notification using React. For code usage with other frameworks, please follow the links in the live demo on the usage tab.

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"

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"

Component API

Inline Notification props

PropTypeRequiredDefaultDescription
actionsnode––Pass in the action nodes that will be rendered inside the notification
childrennode––Pass in the children that will be rendered inside the notification
classNamestringtrueerrorOptional class names to be applied to the notification
kindstringtrueerrorSpecify what state the notification represents: error, success, warning, or info
lowContrastbool––Specify whether you are using the low contrast variant styles
titlestringtrueprovide a captionSpecify notification title
subtitlenode–Specify notification subtitle
rolestring–alertProvide an alternative role for the notification
onCloseButtonClickfunction–() => {}Function that is called when notification closes
iconDescriptionstringtruecloses notificationProvide screen reader accessible description for close icon
statusIconDescriptionstring––Provide screen reader accessible description for status icon
notificationTypestring–inlineSpecify the type of the button
hideCloseButtonbool–falseOptional prop to disable the close button

Notification action button props

PropTypeRequiredDefaultDescription
classnamestring––class name to be applied to the action button
childrennode––the content of the notification button
onclickfunction––click handler for the notification button

Toast notification props

proptyperequireddefaultdescription
childrennode––Pass in the children that will be rendered inside the notification
classNamestringtrue–Optional class names to be applied to the notification
kindstringtrueerrorSpecify what state the notification represents: ‘error’, ‘info’, ‘success’, ‘warning’
lowContrastbool––Specify whether you are using the low contrast variant styles
titlestringtrueprovide a titleSpecify notification title
subtitlenode–Specify notification subtitle
rolestring–alertProvide an alternative role for the notification
captionnode–provide a captionThe caption for the notification
onCloseButtonClickfunction–() => {}The function called when the close button is clicked
iconDescriptionstringtruecloses notificationProvide screen reader accessible description for close icon
statusIconDescriptionstring––Provide screen reader accessible description for status icon
notificationTypestring–toastThe type of notification
hideCloseButtonbool–falseOptional prop to disable the close button
timeoutnumber–0Time until the notification is closed

Feedback

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