🚧 This website is work in progress 👷
Components
Structure
Callout
Callout

Callout

Expand code

Editable Example

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

() => {
  return (
    <Callout
      iconDescription="describes the close button"
      role="alert"
      statusIconDescription="describes the status icon"
      subtitle="Subtitle text goes here."
      title="Notification title"
    />
  );
};
PropDefaultDescriptionValue

actions

ReactNode
–

Pass in the action nodes that will be rendered within the Notification

onClose

any
–

Provide a function that is called when menu is closed

hideCloseButton

boolean
–

Specify the close button should be disabled, or not

icon

ReactNode
–

Pass in the icon that will be rendered within the Notification or set icon to false to hide

iconDescription

string
–

Provide a description for "close" icon that can be read by screen readers

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>

onCloseButtonClick

(e: any) => void
–

Provide a function that is called when menu is closed

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

title

ReactNode
–

Specify the title

Edit this page

On this page

References