Alerts

yarn add @clayui/alert

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

React Component
CSS / Markup

Stable 3.3.3 View in Lexicon CHANGELOG

Variants
API
- ClayAlert
- ClayAlert.ToastContainer

Variants

You can use alert with the following variants:

InfoThis is a default alert

WarningThis is a stripe alert

import React from 'react';
import ClayAlert from '@clayui/alert';

import React from 'react';
import ClayAlert from '@clayui/alert';

const Component = () => {
  return (
    <>
      <ClayAlert displayType="info" spritemap={spritemap} title="Info">
        This is a default alert
      </ClayAlert>

      <ClayAlert
        displayType="warning"
        spritemap={spritemap}
        title="Warning"
        variant="stripe"
      >
        This is a stripe alert
      </ClayAlert>
    </>
  );
};

render(<Component />);

const Component = () => {
  return (
    <>
      <ClayAlert displayType="info" spritemap={spritemap} title="Info">
        This is a default alert
      </ClayAlert>
      <ClayAlert
        displayType="warning"
        spritemap={spritemap}
        title="Warning"
        variant="stripe"
      >
        This is a stripe alert
      </ClayAlert>
    </>
  );
};
render(<Component />);

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

Using with ClayButton

With a ButtonThis is an alert with a button!

import React from 'react';
import ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';

import React from 'react';
import ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';

const Component = () => {
  return (
    <ClayAlert displayType="info" spritemap={spritemap} title="With a Button">
      {"This is an alert with a button!"}

      <ClayAlert.Footer>
        <ClayButton.Group>
          <ClayButton alert>{"View"}</ClayButton>
        </ClayButton.Group>
      </ClayAlert.Footer>
    </ClayAlert>
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayAlert displayType="info" spritemap={spritemap} title="With a Button">
      {"This is an alert with a button!"}
      <ClayAlert.Footer>
        <ClayButton.Group>
          <ClayButton alert>{"View"}</ClayButton>
        </ClayButton.Group>
      </ClayAlert.Footer>
    </ClayAlert>
  );
};
render(<Component />);

ToastContainer

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


import ClayAlert from '@clayui/alert';


import ClayAlert from '@clayui/alert';

const Component = () => {
  const [toastItems, setToastItems] = useState([]);
  return (
    <>
      <div>
        <button
          onClick={() => setToastItems([...toastItems, Math.random() * 100])}
        >
          {"Add Alert"}
        </button>
      </div>

      <ClayAlert.ToastContainer>
        {toastItems.map(value => (
          <ClayAlert
            autoClose={5000}
            key={value}
            onClose={() => {
              setToastItems(prevItems =>
                prevItems.filter(item => item !== value)
              );
            }}
            spritemap={spritemap}
            title={"Hola:"}
          >{`My value is ${value}`}</ClayAlert>
        ))}
      </ClayAlert.ToastContainer>
    </>
  );
};

render(<Component />);

const Component = () => {
  const [toastItems, setToastItems] = useState([]);
  return (
    <>
      <div>
        <button
          onClick={() => setToastItems([...toastItems, Math.random() * 100])}
        >
          {"Add Alert"}
        </button>
      </div>
      <ClayAlert.ToastContainer>
        {toastItems.map(value => (
          <ClayAlert
            autoClose={5000}
            key={value}
            onClose={() => {
              setToastItems(prevItems =>
                prevItems.filter(item => item !== value)
              );
            }}
            spritemap={spritemap}
            title={"Hola:"}
          >{`My value is ${value}`}</ClayAlert>
        ))}
      </ClayAlert.ToastContainer>
    </>
  );
};
render(<Component />);

API

ClayAlert

Property	Type	Required	Default	Description
autoClose	boolean \| number	false		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	false		Callback function for when the 'x' is clicked.
displayType	'danger' \| 'info' \| 'success' \| 'warning'	false	'info'	Determines the style of the alert.
hideCloseIcon	boolean	false	false	Flag to indicate if close icon should be show. This prop is used in conjunction with the `onClose`prop;
spritemap	string	false		Path to the spritemap that Icon should use when referencing symbols.
title	string	false		The summary of the Alert, often is something like 'Error' or 'Info'.
variant	literal	false		Determines the variant of the alert.

ClayAlert.ToastContainer

Property	Type	Required	Default	Description
children	React.ReactElement<IClayAlertProps> \| Array<React.ReactElement<IClayAlertProps>>	false		Children of the ToastContainer must be a ClayAlert

Colors
- Non-standard colors
Examples
- Toast
- Embedded
- Stripe
Non-standard examples
- Alert Lists
Additional Options

Don't forget to check WAI-ARIA accessibility pratices for alerts when writting your markup.

Colors

Lexicon adopts in its design system the following colors below:

.alert.alert-success

.alert.alert-info

.alert.alert-warning

.alert.alert-danger

Non-standard colors

The colors below do not follow Lexicon standards but follow the idea of satellite components, Clay provides non-standard colors to give you more flexibility to build UI that belong to the product.

.alert.alert-primary

.alert.alert-secondary

.alert.alert-dark

.alert.alert-light

Examples

Toast

This type of alert is specific for toast messages. These type of messages appear on the top right corner of the screen. The maximum width of a toast message is 360px, and the height can vary depending on the number of rows. It always has a close action.

Error: This is an error message

Info: This is an info message.

Success: This is a success message

Warning: This is a warning message.

<div class="alert alert-dismissible alert-danger" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Error:</strong> This is an error message
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		...
	</button>
</div>

<div class="alert alert-dismissible alert-info" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Info:</strong> This is an info message.
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		...
	</button>
</div>

<div class="alert alert-dismissible alert-success" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Success:</strong> This is a success message
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		...
	</button>
</div>

<div class="alert alert-dismissible alert-warning" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Warning:</strong> This is a warning message.
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		...
	</button>
</div>

Embedded

Embedded alerts are meant for use in forms. Usually you will only need to use the information once. Its width depends on the width of the container it is placed in, always respecting the container margins to the content. The close action is not required for embedded alerts.

Error: This is an error message

Error: This is a success message

Error: This is an info message

Error: This is a warning message

<div class="alert alert-danger" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Error:</strong>This is an error message
</div>

<div class="alert alert-success" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Error:</strong>This is a success message
</div>

<div class="alert alert-info" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Error:</strong>This is an info message
</div>

<div class="alert alert-warning" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Error:</strong>This is a warning message
</div>

Stripe

Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert usually appears on "Save" action, communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.

Danger This is an error message

Success This is a success message

Info This is an info message

Warning This is a warning message

<div class="alert alert-danger alert-dismissible alert-fluid" role="alert">
	<div class="container">
		<span class="alert-indicator">
			...
		</span>
		<strong class="lead">Danger</strong> This is an error message
		<button
			aria-label="Close"
			class="close"
			data-dismiss="alert"
			type="button"
		>
			...
		</button>
	</div>
</div>

<div class="alert alert-dismissible alert-fluid alert-success" role="alert">
	<div class="container">
		<span class="alert-indicator">
			...
		</span>
		<strong class="lead">Success</strong> This is a success message
		<button
			aria-label="Close"
			class="close"
			data-dismiss="alert"
			type="button"
		>
			...
		</button>
	</div>
</div>

<div class="alert alert-dismissible alert-fluid alert-info" role="alert">
	<div class="container">
		<span class="alert-indicator">
			...
		</span>
		<strong class="lead">Info</strong> This is an info message
		<button
			aria-label="Close"
			class="close"
			data-dismiss="alert"
			type="button"
		>
			...
		</button>
	</div>
</div>

<div class="alert alert-dismissible alert-fluid alert-warning" role="alert">
	<div class="container">
		<span class="alert-indicator">
			...
		</span>
		<strong class="lead">Warning</strong> This is a warning message
		<button
			aria-label="Close"
			class="close"
			data-dismiss="alert"
			type="button"
		>
			...
		</button>
	</div>
</div>

Non-standard examples

These examples are not included in the Lexicon design system but they are built using foundations and Lexicon core components, these components may belong to the product or application.

Alert Lists

1 Files couldn't upload.
RTF

file-upload.RTF
Error: couldn't upload.
JPG

file-name.JPG

Uploaded - 142.1KB
RTF

ABC-file.RTF

Size: 156.6 MB

34%

<ul class="alert-list">
	<li class="alert alert-danger alert-dismissible alert-fluid" role="alert">
		<div class="container-fluid">
			<div
				class="autofit-float autofit-padded autofit-row autofit-row-center"
			>
				<div class="autofit-col">
					<div class="autofit-section">
						<span class="alert-indicator">
							...
						</span>
						<strong class="lead">1 Files</strong> couldn't upload.
					</div>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<button class="btn btn-secondary btn-sm" type="button">
							<span class="inline-item inline-item-before">
								...
							</span>
							Retry all
						</button>
					</div>
				</div>
			</div>
			<button
				aria-label="Close"
				class="close"
				data-dismiss="alert"
				type="button"
			>
				...
			</button>
		</div>
	</li>
	<li class="alert alert-danger alert-dismissible alert-fluid" role="alert">
		<div class="container-fluid">
			<div
				class="autofit-float autofit-padded autofit-row autofit-row-center"
			>
				<div class="autofit-col">
					<span class="sticker sticker-secondary">RTF</span>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<h4 class="component-title">
							file-upload.RTF
						</h4>
						<span class="alert-indicator">
							...
						</span>
						<strong class="lead">Error:</strong> couldn't upload.
					</div>
				</div>
				<div class="autofit-col">
					<button class="btn btn-secondary btn-sm" type="button">
						<span class="inline-item inline-item-before">
							...
						</span>
						Retry
					</button>
				</div>
			</div>
			<button
				aria-label="Close"
				class="close"
				data-dismiss="alert"
				type="button"
			>
				...
			</button>
		</div>
	</li>
	<li class="alert alert-light alert-dismissible alert-fluid">
		<div class="container-fluid">
			<div
				class="autofit-float autofit-padded autofit-row autofit-row-center"
			>
				<div class="autofit-col">
					<span class="sticker sticker-secondary">JPG</span>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<h4 class="component-title">file-name.JPG</h4>
						<div class="component-subtitle">Uploaded - 142.1KB</div>
					</div>
				</div>
			</div>
			<button
				aria-label="Close"
				class="close"
				data-dismiss="alert"
				type="button"
			>
				...
			</button>
		</div>
	</li>
	<li class="alert alert-light alert-dismissible alert-fluid">
		<div class="container-fluid">
			<div
				class="autofit-float autofit-padded autofit-row autofit-row-center"
			>
				<div class="autofit-col">
					<span class="sticker sticker-secondary">RTF</span>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<h4 class="component-title">ABC-file.RTF</h4>
						<div class="progress-group progress-group-stacked">
							<div class="progress">
								<div
									aria-valuenow="34"
									aria-valuemin="0"
									aria-valuemax="100"
									class="progress-bar"
									role="progressbar"
									style="width: 34%;"
								></div>
							</div>
							<div class="autofit-row">
								<div class="autofit-col autofit-col-expand">
									<div class="component-subtitle">
										Size: 156.6 MB
									</div>
								</div>
								<div class="autofit-col">
									<div class="component-subtitle">34%</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button
				aria-label="Close"
				class="close"
				data-dismiss="alert"
				type="button"
			>
				...
			</button>
		</div>
	</li>
</ul>

Additional Options

Mixed HTML Content

All alerts accept HTML as their content. You can use the following modifiers:

.lead inside of an alert to make the beginning of your message stand out
.alert-link to style a link inside your alert

Warning: This alert is a warning message.

<div class="alert alert-warning" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Warning:</strong> This alert is a
	<a href="#1" class="alert-link">warning message</a>.
</div>

Dismissible Alerts

Success: This is a success closeable alert

<div class="alert alert-dismissible alert-success" role="alert">
	<span class="alert-indicator">
		...
	</span>
	<strong class="lead">Success:</strong> This is a success closeable alert
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		...
	</button>
</div>

Alert Notifications Absolute

An absolute positioned container for placing alerts on the top right corner relative to .alert-container. Use this to create sticky positioned alerts with javascript, modifying the CSS property transform: translateY(); or margin-top when scrollY reaches a specific threshold. This component should generally be placed at the top of the page for sticky alerts aligned at the top.

<div class="alert-container container">
	<div class="alert-notifications alert-notifications-absolute">
		...
	</div>
</div>

Fixed Notifications

A fixed positioned container for placing alerts on the top right corner of the page. This component can generally be placed anywhere on the page.

<div class="alert-notifications alert-notifications-fixed">
	<div
		class="alert alert-dismissible alert-info alert-notification"
		role="alert"
	>
		...
	</div>
</div>