Notification

ToastNotification

Editable Example

import {} from "@wfp/react";

() => {
  return <tC />;
};

Prop	Default	Description	Value
timeout `number`	0	Specify the timeout in milliseconds default: 0
iconDescription `string`	closes notification	Provide a description for "close" icon that can be read by screen readers default: closes notification
onCloseButtonClick `(e: any) => void`	() => {}	Provide a function that is called when menu is closed default: () => {}
onClose `any`	() => {}	Provide a function that is called when menu is closed default: () => {}
hideCloseButton `boolean`	false	Specify the close button should be disabled, or not default: false	hideCloseButton
actions `ReactNode`	–	Pass in the action nodes that will be rendered within the Notification
icon `ReactNode`	–	Pass in the icon that will be rendered within the Notification or set icon to false to hide
kind `"error" \|"info" \|"success" \|"warning" \|"warning-alt"`	error	Specify what state the notification represents default: error
lowContrast `boolean`	true	Specify whether you are using the low contrast variant of the Notification. default: true	lowContrast
notificationType `"toast" \|"inline"`	toast	By default, this value is "inline". You can also provide an alternate type if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>` default: toast
role `string`	alert	By default, this value is "alert". You can also provide an alternate role if it makes sense from the accessibility-side default: alert
statusIconDescription `string`	–	Provide a description for "status" icon that can be read by screen readers
subtitle `ReactNode`	–	Specify the sub-title
isDismissible `boolean`	–	An optional prop that displays a close button and makes Callout to be dismissible	isDismissible
title `ReactNode`	provide a title	Specify the title default: provide a title
isToggleable `boolean`	–	Provide toggleable functional, that Callout could show or hide content	isToggleable
code `boolean`	–	This prop is a boolean that specifies whether the content within the Callout should be rendered as a code block. If true, it triggers the use of <pre><code> tags to format the content with monospaced font and preserved whitespace, ideal for displaying code.	code

Notification

ToastNotification

Editable Example

timeout

iconDescription

onCloseButtonClick

onClose

hideCloseButton

actions

icon

kind

lowContrast

notificationType

role

statusIconDescription

subtitle

isDismissible

title

isToggleable

code

On this page

References