Alerts

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

install	yarn add @clayui/alert
version
use	`import Alert, {usePrefersPersistentAlerts} from '@clayui/alert';import Alert, {usePrefersPersistentAlerts} from '@clayui/alert';`

Table of Contents

Display Types
Variants
Icons
Using with Button
Inline
Using with ToastContainer
Disable Auto Close
Persistent Alerts in Custom Components
API Reference

Display Types

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

Open 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 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 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 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 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 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>
	);
}

Disable Auto Close

When a Provider sets persistentAlerts, it overrides autoClose (true or a duration in ms) and alerts stay until they are dismissed. Use it to give users who need more time to read a way to keep alerts open, which helps meet WCAG 2.2.1 (Timing Adjustable). An alert shows a close button only when it has onClose and does not set hideCloseIcon. If an alert has no close button, such as one with hideCloseIcon or one without onClose, give users another way to dismiss it when persistentAlerts is on.

Alerts also stay open while document.body has the c-prefers-persistent-alerts class, even when a Provider sets persistentAlerts={false}. The class can be added or removed at any time, so a page can opt in without wiring a Provider.

<Provider persistentAlerts spritemap="/public/icons.svg">
	<Alert autoClose={5000} onClose={() => {}} title="Hola:">
		This alert stays until it is dismissed.
	</Alert>
</Provider>

<Provider persistentAlerts spritemap="/public/icons.svg">
	<Alert autoClose={5000} onClose={() => {}} title="Hola:">
		This alert stays until it is dismissed.
	</Alert>
</Provider>

Persistent Alerts in Custom Components

A custom component that closes on its own can follow the same setting with usePrefersPersistentAlerts. It returns true when a Provider sets persistentAlerts or document.body has the c-prefers-persistent-alerts class, and it updates when either one changes. While it returns true, do not start the auto close timer.

API Reference

ClayAlert

typeof ClayAlert

Parameters

actions

any

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.

closeButtonAriaLabel

string | undefined

Aria label for the dismissable alert close button.

containerClassName

string | undefined

Additional class name for the conditional container.

displayType

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;

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.

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" | "inline" | "stripe" | undefined

Determines the variant of the alert.

Returns

any

Loading API references...

ClayAlertFooter

typeof ClayAlertFooter

Parameters

*

React.HTMLAttributes<HTMLDivElement>

Returns

any

Loading API references...

ClayToastContainer

typeof ClayToastContainer

Parameters

children

any

Children of the ToastContainer must be a ClayAlert

Returns

any

Loading API references...

usePrefersPersistentAlerts

() => any

Returns whether alerts must stay open instead of closing automatically. It is true when the Provider persistentAlerts prop is set or the c-prefers-persistent-alerts class is present on the body.

Returns

any

Loading API references...

Edit this page on GitHub

Table of Contents

Display Types
Variants
Icons
Using with Button
Inline
Using with ToastContainer
Disable Auto Close
Persistent Alerts in Custom Components
API Reference