Alerts

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

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

Edit this page on GitHub

Contributors

Table of Contents

Display Types
Variants
Icons
Using with Button
Inline
Using with ToastContainer