Callout

Import statement

import { Callout } from "@wfp/react"

The Callout component is a flexible and customizable notification component used to display a variety of messages to users, such as alerts, warnings, information, and success messages.

Usage

<Callout
  title="Your Title"
  subtitle="Your subtitle"
  kind="info"
  // ...other props
>
  Your content here
</Callout>;

Example of a warning

<Callout
  title="Network warning"
  subtitle="There was an warning connecting to the server"
  kind="warning"
>
  Please check your internet connection and try again.
</Callout>;

Example of a dismissible

<Callout
  title="Network Error"
  subtitle="There was an error connecting to the server"
  kind="info"
  onClose={() => console.log("Closed")}
  isDismissible
>
  Please check your internet connection and try again.
</Callout>;

Example of a toggleable

<Callout
  title="Network Error"
  subtitle="Toggleable"
  kind="info"
  isToggleable
  style={{ minWidth: "28rem" }}
>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr.
  </p>
</Callout>;

Accessibility Considerations

• Ensure the role prop is set appropriately to ensure screen readers interpret the notification correctly.
• Use the iconDescription and statusIconDescription props to provide meaningful descriptions for icons.

Best Practices

• Use appropriate kind values to indicate the nature of the notification (e.g., error, success).
• Keep titles and subtitles concise and informative.
• Use actions sparingly to avoid overwhelming the user.