Alerts are used to capture the attention of the user in an intrusive way.

installyarn add @clayui/alert
versionNPM Version
useimport Alert from '@clayui/alert';

Display Types

The available displayTypes are info, secondary, success, warning, and danger.

We recommend that you review the use cases in the Storybook.

Variants

You can use alert with the feedback, inline, and stripe variants.

Icons

Each Alert displayType has a default icon, the icon can be changed through the symbol attribute.

Using with Button

Inline

Using with ToastContainer

You can use alerts with a ToastContainer to render the alerts in a container with position: fixed.

API Reference

ClayAlert

{ ({ actions, autoClose, children, className, displayType, hideCloseIcon, onClose, role, spritemap, symbol, title, variant, ...otherProps }: IClayAlertProps): JSX.Element; displayName: string; Footer: { ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>): JSX.Element; displayName: string; }; ToastContainer: { ({ children, className, ...otherProps }: IToastContainerProps): JSX.Element; displayName: string; }; }
Parameters

actions

React.ReactNode

A React Component to render the alert actions.

autoClose

number | boolean | undefined

Flag to indicate alert should automatically call onClose. It also accepts a duration (in ms) which indicates how long to wait. If true is passed in, the timeout will be 10000ms.

onClose

(() => void) | undefined

Callback function for when the ‘x’ is clicked.

role

string | null | undefined

The alert role is for important, and usually time-sensitive, information.

displayType

"danger" | "info" | "secondary" | "success" | "warning" | undefined

Determines the style of the alert.

hideCloseIcon

boolean | undefined

Flag to indicate if close icon should be show. This prop is used in conjunction with the onCloseprop;

spritemap

string | undefined

Path to the spritemap that Icon should use when referencing symbols.

symbol

string | undefined

The icon’s symbol name in the spritemap.

title

string | undefined

The summary of the Alert, often is something like ‘Error’ or ‘Info’.

variant

"feedback" | "stripe" | "inline" | undefined

Determines the variant of the alert.

Returns
Element
{ ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>): JSX.Element; displayName: string; }
Returns
Element

ClayToastContainer

{ ({ children, className, ...otherProps }: IToastContainerProps): JSX.Element; displayName: string; }
Parameters

children

React.ReactElement<any, string | React.JSXElementConstructor<any>> | Array<React.ReactElement<any, string | React.JSXElementConstructor<any>>> | undefined

Children of the ToastContainer must be a ClayAlert

Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Diego Nascimento, Patrick Yeo, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM