🚧 This website is work in progress 👷
Components
Structure
Callout

Callout

Callout

Editable Example

import { Callout } from "@wfp/react";

() => {
  return <Callout />;
};
PropDefaultDescriptionValue

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"
–

Specify what state the notification represents

lowContrast

boolean
–

Specify whether you are using the low contrast variant of the Notification.

notificationType

"toast" |"inline"
–

By default, this value is "inline". You can also provide an alternate type if it makes sense for the underlying <NotificationTextDetails> and <NotificationButton>

role

string
–

By default, this value is "alert". You can also provide an alternate role if it makes sense from the accessibility-side

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

title

ReactNode
–

Specify the title

onClose

any
–

Provide a function that is called when menu is closed

isToggleable

boolean
–

Provide toggleable functional, that Callout could show or hide content

onCloseButtonClick

(e: any) => void
–

Provide a function that is called when menu is closed

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.

On this page

References