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

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

Variant Sass API

The map $alert-palette allows generating any number of alert variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .alert- to the key (e.g., .alert-primary). It will also generate a Sass placeholder prefixed by %calert- (e.g., %alert-primary).

$alert-palette: (
	primary: (
		background-color: $primary
	),
	'%alert-tertiary': (
		background-color: green
	),
	'.alert-tertiary': (
		extend: '%alert-tertiary'
	),
	'.alert-quaternary': (
		extend: '%alert-tertiary'
	)
);

Outputs:

.alert-primary {
	background-color: #0b5fff;
}

.alert-tertiary,
.alert-quaternary {
	background-color: green;
}

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 className="alert alert-dismissible alert-danger">
	<span className="alert-indicator"> ... </span>
	<strong className="lead">Error:</strong> This is an error message
	<button
		aria-label="Close"
		className="close"
		data-dismiss="alert"
		type="button"
	>
		...
	</button>
</div>

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

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

<div className="alert alert-dismissible alert-warning">
	<span className="alert-indicator"> ... </span>
	<strong className="lead">Warning:</strong> This is a warning message.
	<button
		aria-label="Close"
		className="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 className="alert alert-danger">
	<span className="alert-indicator"> ... </span>
	<strong className="lead">Error:</strong>This is an error message
</div>

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

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

<div className="alert alert-warning">
	<span className="alert-indicator"> ... </span>
	<strong className="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 className="alert alert-danger alert-dismissible alert-fluid">
	<div className="container">
		<span className="alert-indicator"> ... </span>
		<strong className="lead">Danger</strong> This is an error message
		<button
			aria-label="Close"
			className="close"
			data-dismiss="alert"
			type="button"
		>
			...
		</button>
	</div>
</div>

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

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

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

Feedback

Add the modifier alert-feedback on the alert element to remove the background, border, and padding.

Primary Indicator: