Alerts
View in LexiconAlerts are used to capture the attention of the user in an intrusive way.
install | yarn add @clayui/alert |
---|---|
version | |
use | import Alert from '@clayui/alert'; |
Table of Contents
Display Types
The available displayTypes
are info
, secondary
, success
, warning
, and danger
.
import {Provider} from '@clayui/core'; import Alert from '@clayui/alert'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Alert displayType="info" title="Info" role={null}> This is an info message. </Alert> <Alert displayType="success" title="Success" role={null}> This is a success message. </Alert> <Alert displayType="warning" title="Warning" role={null}> This is a warning message. </Alert> <Alert displayType="danger" title="Danger" role={null}> This is a danger message. </Alert> </div> </Provider> ); }
We recommend that you review the use cases in the Storybook.
Variants
You can use alert with the feedback
, inline
, and stripe
variants.
import {Provider, Button} from '@clayui/core'; import Alert from '@clayui/alert'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div className="c-mt-3"> <Alert actions={ <Button.Group spaced> <Button displayType="warning" small> Replace </Button> <Button alert>Keep Both</Button> </Button.Group> } displayType="warning" onClose={() => {}} title="Alert" variant="inline" > A file with this name already exists. </Alert> </div> <Alert displayType="info" title="Info" variant="stripe" role={null}> This is a stripe variant. </Alert> <div className="c-mt-3"> <Alert displayType="success" title="This is an inline variant." variant="inline" role={null} /> </div> <div className="c-mt-3"> <Alert displayType="danger" title="This is a feedback variant." variant="feedback" role={null} /> </div> </div> </Provider> ); }
Icons
Each Alert displayType
has a default icon, the icon can be changed through the symbol
attribute.
import {Provider} from '@clayui/core'; import Alert from '@clayui/alert'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Alert displayType="info" symbol="thumbs-up-full" title="Info" variant="stripe" role={null} > This is a stripe variant. </Alert> </div> </Provider> ); }
Using with Button
import {Provider, Button} from '@clayui/core'; import Alert from '@clayui/alert'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Alert displayType="info" title="With a Button" role={null}> This is an alert with a button! <Alert.Footer> <Button alert>View</Button> </Alert.Footer> </Alert> </div> </Provider> ); }
Inline
import {Provider, Button} from '@clayui/core'; import Alert from '@clayui/alert'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Alert actions={<Button alert>View</Button>} displayType="info" title="With a Button" variant="inline" role={null} > This is an alert with a button! </Alert> </div> </Provider> ); }
Using with ToastContainer
You can use alerts with a ToastContainer
to render the alerts in a container with position: fixed
.
import {Provider, Button} from '@clayui/core'; import Alert from '@clayui/alert'; import React, {useState} from 'react'; export default function App() { const [toastItems, setToastItems] = useState([]); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div> <Button onClick={() => setToastItems([...toastItems, Math.random() * 100])} > Add Alert </Button> </div> <Alert.ToastContainer> {toastItems.map((value) => ( <Alert autoClose={5000} key={value} onClose={() => { setToastItems((prevItems) => prevItems.filter((item) => item !== value) ); }} title="Hola:" > My value is {value} </Alert> ))} </Alert.ToastContainer> </div> </Provider> ); }
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 onClose
prop;
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
ElementClayAlertFooter
{ ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>): JSX.Element; displayName: string; }
Returns
ElementClayToastContainer
{ ({ 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
ElementContributors
Last edited May 9, 2025 at 6:15:38 AM