Components
Structure
Callout

Callout

Callout

Expand code

Editable Example

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

() => {
  return (
    <Callout
      kind="info"
      subtitle="Your subtitle"
      title="Your Title"
    >
      Your content here
    </Callout>
  );
};
PropDefaultDescriptionValue

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.

title

ReactNode
–

Specify the title

role

string
–

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

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.

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

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

On this page

References