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
actionsnodePass in the action nodes that will be rendered inside the notification
childrennodePass 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
lowContrastboolSpecify whether you are using the low contrast variant styles
titlestringtrueprovide a captionSpecify notification title
subtitlenodeSpecify notification subtitle
rolestringalertProvide an alternative role for the notification
onCloseButtonClickfunction() => {}Function that is called when notification closes
iconDescriptionstringtruecloses notificationProvide screen reader accessible description for close icon
statusIconDescriptionstringProvide screen reader accessible description for status icon
notificationTypestringinlineSpecify the type of the button
hideCloseButtonboolfalseOptional prop to disable the close button

Notification action button props

PropTypeRequiredDefaultDescription
classnamestringclass name to be applied to the action button
childrennodethe content of the notification button
onclickfunctionclick handler for the notification button

Toast notification props

proptyperequireddefaultdescription
childrennodePass in the children that will be rendered inside the notification
classNamestringtrueOptional class names to be applied to the notification
kindstringtrueerrorSpecify what state the notification represents: ‘error’, ‘info’, ‘success’, ‘warning’
lowContrastboolSpecify whether you are using the low contrast variant styles
titlestringtrueprovide a titleSpecify notification title
subtitlenodeSpecify notification subtitle
rolestringalertProvide an alternative role for the notification
captionnodeprovide 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
statusIconDescriptionstringProvide screen reader accessible description for status icon
notificationTypestringtoastThe type of notification
hideCloseButtonboolfalseOptional prop to disable the close button
timeoutnumber0Time until the notification is closed

Feedback

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