Notification – Carbon Design System

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
Toast notification
Inline notification
Inline notifications with action button
Component API
Feedback

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

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

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