Alert

yarn add @clayui/alert

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

Stable 3.85.0 View in Lexicon CHANGELOG

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.

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

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

Feedback

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

Primary Indicator: with some additional text and a link.

Autofit Primary Indicator

Secondary Indicator: with some additional text and a link.

Secondary Indicator

Success Indicator: with some additional text and a link.

Success Indicator

Info Indicator: with some additional text and a link.

Info Indicator

Warning Indicator: with some additional text and a link.

Warning Indicator

Danger Indicator: with some additional text and a link.

Danger Indicator

Code Sample (expand to see it)

<div class="alert alert-feedback alert-primary" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-info-circle"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#info-circle"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Primary Indicator:</strong>
				<span class="component-text"
					>with some additional text and a
					<a class="alert-link" href="#1">link</a>.</span
				>
			</div>
		</div>
	</div>
</div>

<div class="alert alert-dismissible alert-feedback alert-primary" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-info-circle"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#info-circle"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Autofit Primary Indicator</strong>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div class="alert alert-feedback alert-secondary" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-info-circle"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#info-circle"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Secondary Indicator:</strong>
				<span class="component-text"
					>with some additional text and a
					<a class="alert-link" href="#1">link</a>.</span
				>
			</div>
		</div>
	</div>
</div>

<div
	class="alert alert-dismissible alert-feedback alert-secondary"
	role="alert"
>
	<span class="alert-indicator">
		<svg
			class="lexicon-icon lexicon-icon-info-circle"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#info-circle"></use>
		</svg>
	</span>
	<strong class="lead">Secondary Indicator</strong>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div class="alert alert-feedback alert-success" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-check-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#check-circle-full"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Success Indicator:</strong>
				<span class="component-text"
					>with some additional text and a
					<a class="alert-link" href="#1">link</a>.</span
				>
			</div>
		</div>
	</div>
</div>

<div class="alert alert-dismissible alert-feedback alert-success" role="alert">
	<span class="alert-indicator">
		<svg
			class="lexicon-icon lexicon-icon-check-circle-full"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#check-circle-full"></use>
		</svg>
	</span>
	<strong class="lead">Success Indicator</strong>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div class="alert alert-feedback alert-info" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-info-circle"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#info-circle"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Info Indicator:</strong>
				<span class="component-text"
					>with some additional text and a
					<a class="alert-link" href="#1">link</a>.</span
				>
			</div>
		</div>
	</div>
</div>

<div class="alert alert-dismissible alert-feedback alert-info" role="alert">
	<span class="alert-indicator">
		<svg
			class="lexicon-icon lexicon-icon-info-circle"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#info-circle"></use>
		</svg>
	</span>
	<strong class="lead">Info Indicator</strong>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div class="alert alert-feedback alert-warning" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-warning-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#warning-full"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Warning Indicator:</strong>
				<span class="component-text"
					>with some additional text and a
					<a class="alert-link" href="#1">link</a>.</span
				>
			</div>
		</div>
	</div>
</div>

<div class="alert alert-dismissible alert-feedback alert-warning" role="alert">
	<span class="alert-indicator">
		<svg
			class="lexicon-icon lexicon-icon-warning-full"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#warning-full"></use>
		</svg>
	</span>
	<strong class="lead">Warning Indicator</strong>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div class="alert alert-feedback alert-danger" role="alert">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-info-circle"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#info-circle"
						></use>
					</svg>
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<strong class="lead">Danger Indicator:</strong>
				<span class="component-text"
					>with some additional text and a
					<a class="alert-link" href="#1">link</a>.</span
				>
			</div>
		</div>
	</div>
</div>

<div class="alert alert-dismissible alert-feedback alert-danger" role="alert">
	<span class="alert-indicator">
		<svg
			class="lexicon-icon lexicon-icon-exclamation-full"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#exclamation-full"></use>
		</svg>
	</span>
	<strong class="lead">Danger Indicator</strong>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

Indicator Start

An alternative to using autofit utilities, this keeps the text after the indicator icon from flowing under the icon when it breaks to a new line.

alert-dismissible

Success: Strong kopi-luwak half and half single origin single shot, half and half instant latte brewed latte. At, decaffeinated, blue mountain viennese barista, spoon carajillo shop viennese dark. And ristretto caffeine, plunger pot black, café au lait galão flavour foam strong. Macchiato roast, breve fair trade seasonal et cultivar.

alert-fluid

Primary: Strong kopi-luwak half and half single origin single shot, half and half instant latte brewed latte. At, decaffeinated, blue mountain viennese barista, spoon carajillo shop viennese dark. And ristretto caffeine, plunger pot black, café au lait galão flavour foam strong. Macchiato roast, breve fair trade seasonal et cultivar.

alert-feedback

Danger: Strong kopi-luwak half and half single origin single shot, half and half instant latte brewed latte. At, decaffeinated, blue mountain viennese barista, spoon carajillo shop viennese dark. And ristretto caffeine, plunger pot black, café au lait galão flavour foam strong. Macchiato roast, breve fair trade seasonal et cultivar.

Code Sample (expand to see it)

<div class="alert alert-dismissible alert-indicator-start alert-success">
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-check-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#check-circle-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Success:</strong>
				<span
					>Strong kopi-luwak half and half single origin single shot,
					half and half instant latte brewed latte. At, decaffeinated,
					blue mountain viennese barista, spoon carajillo shop
					viennese dark. And ristretto caffeine, plunger pot black,
					café au lait galão flavour foam strong. Macchiato roast,
					breve fair trade seasonal et cultivar.</span
				>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div class="alert alert-fluid alert-indicator-start alert-warning" role="alert">
	<div class="container-fluid container-fluid-max-xl">
		<span class="alert-indicator">
			<svg
				class="lexicon-icon lexicon-icon-warning-full"
				focusable="false"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#warning-full"></use>
			</svg>
		</span>
		<strong class="lead">Primary:</strong>
		<span
			>Strong kopi-luwak half and half single origin single shot, half and
			half instant latte brewed latte. At, decaffeinated, blue mountain
			viennese barista, spoon carajillo shop viennese dark. And ristretto
			caffeine, plunger pot black, café au lait galão flavour foam strong.
			Macchiato roast, breve fair trade seasonal et cultivar.</span
		>
	</div>
</div>

<div
	class="alert alert-danger alert-dismissible alert-feedback alert-indicator-start"
	role="alert"
>
	<span class="alert-indicator">
		<svg
			class="lexicon-icon lexicon-icon-exclamation-full"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#exclamation-full"></use>
		</svg>
	</span>
	<strong class="lead">Danger:</strong>
	<span class="component-text"
		>Strong kopi-luwak half and half single origin single shot, half and
		half instant latte brewed latte. At, decaffeinated, blue mountain
		viennese barista, spoon carajillo shop viennese dark. And ristretto
		caffeine, plunger pot black, café au lait galão flavour foam strong.
		Macchiato roast, breve fair trade seasonal et cultivar.</span
	>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

Inline

This changes an alert to use display: inline-block. It will only expand to be as wide as its content and max out at the parent container's width.

Success: File uploaded. Would you like to add categories automatically?

Alert: A file with this name already exists.

Info: Would you like to add categories automatically?

Error: The file wasn't uploaded.

Code Sample (expand to see it)

<div
	class="alert alert-dismissible alert-indicator-start alert-inline alert-success"
>
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-check-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#check-circle-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Success:</strong>
				<span
					>File uploaded. Would you like to add categories
					automatically?</span
				>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-success btn-sm" type="button">
							Add
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div
	class="alert alert-dismissible alert-indicator-start alert-inline alert-warning"
>
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-warning-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#warning-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Alert:</strong>
				<span>A file with this name already exists.</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-warning btn-sm" type="button">
							Replace
						</button>
					</div>
					<div class="btn-group-item">
						<button class="btn alert-btn" type="button">
							Keep Both
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div
	class="alert alert-dismissible alert-indicator-start alert-inline alert-info alert-notification"
	role="alert"
>
	<div class="autofit-row alert-autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-exclamation-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#exclamation-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Info:</strong>
				<span>Would you like to add categories automatically?</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-info btn-sm" type="button">
							Add
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

<div
	class="alert alert-dismissible alert-fluid alert-indicator-start alert-inline alert-info alert-notification"
	role="alert"
>
	<div class="container-fluid container-fluid-max-xl">
		<div class="autofit-row alert-autofit-row">
			<div class="autofit-col autofit-col-expand">
				<div class="autofit-section">
					<span class="alert-indicator">
						<svg
							class="lexicon-icon lexicon-icon-exclamation-full"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#exclamation-full"
							></use>
						</svg>
					</span>
					<strong class="lead">Info:</strong>
					<span>Would you like to add categories automatically?</span>
				</div>
			</div>
			<div class="autofit-col">
				<div class="autofit-section">
					<div class="btn-group">
						<div class="btn-group-item">
							<button class="btn btn-info btn-sm" type="button">
								Add Categories
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<button
			aria-label="Close"
			class="close"
			data-dismiss="alert"
			type="button"
		>
			<svg
				class="lexicon-icon lexicon-icon-times"
				focusable="false"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#times" />
			</svg>
		</button>
	</div>
</div>

<div
	class="alert alert-dismissible alert-inline alert-notification alert-danger"
	role="alert"
>
	<div class="autofit-row alert-autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-times-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#times-circle-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Error:</strong>
				<span>The file wasn't uploaded.</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-danger btn-sm" type="button">
							Retry
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

Autofit Stacked

The class alert-autofit-stacked forces each autofit-col to stack on top of each other, apply it on the alert element.

Success: File uploaded. Would you like to add categories automatically?

Code Sample (expand to see it)

<div
	class="alert alert-autofit-stacked alert-dismissible alert-indicator-start alert-inline alert-success"
>
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-check-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#check-circle-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Success:</strong>
				<span
					>File uploaded. Would you like to add categories
					automatically?</span
				>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-success btn-sm" type="button">
							Add
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

Autofit Stacked Sm Down

The class alert-autofit-stacked-sm-down forces each autofit-col to stack on top of each other at screen sizes 767px and below, apply it on the alert element.

Success: File uploaded. Would you like to add categories automatically?

Code Sample (expand to see it)

<div
	class="alert alert-autofit-stacked-sm-down alert-dismissible alert-indicator-start alert-inline alert-success"
>
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-check-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#check-circle-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Success:</strong>
				<span
					>File uploaded. Would you like to add categories
					automatically?</span
				>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-success btn-sm" type="button">
							Add
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</div>

Autofit Stacked Xs Down

The class alert-autofit-stacked-xs-down forces each autofit-col to stack on top of each other at screen sizes 575px and below, apply it on the alert element.

Success: File uploaded. Would you like to add categories automatically?

Code Sample (expand to see it)

<div
	class="alert alert-autofit-stacked-xs-down alert-dismissible alert-indicator-start alert-inline alert-success"
>
	<div class="alert-autofit-row autofit-row">
		<div class="autofit-col autofit-col-expand">
			<div class="autofit-section">
				<span class="alert-indicator">
					<svg
						class="lexicon-icon lexicon-icon-check-circle-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#check-circle-full"
						></use>
					</svg>
				</span>
				<strong class="lead">Success:</strong>
				<span
					>File uploaded. Would you like to add categories
					automatically?</span
				>
			</div>
		</div>
		<div class="autofit-col">
			<div class="autofit-section">
				<div class="btn-group">
					<div class="btn-group-item">
						<button class="btn btn-success btn-sm" type="button">
							Add
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg
			class="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</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%

Code Sample (expand to see it)

<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.

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

<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.

Code Sample (expand to see it)

<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.

Code Sample (expand to see it)

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