Components
Structure
Callout

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

Editable Example

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

Example of a warning

Editable Example

<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

Editable Example

<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

Expand code

Editable Example

<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.

On this page

References