Alerts

View in Lexicon

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';

Table of Contents

Display Types

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

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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.

Open on CodeSandboxOpen Sandbox
import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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

Open on CodeSandboxOpen Sandbox
import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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

Open on CodeSandboxOpen Sandbox
import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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.

Open on CodeSandboxOpen Sandbox
import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [toastItems, setToastItems] = useState([]);

	return (
		<Provider spritemap="/public/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 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

"inline" | "feedback" | "stripe" | 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 January 29, 2025 at 1:35:02 AM

Table of Contents