Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Alerts

Description

Alerts are used to capture the attention of the user in an intrusive way. They can be used just to say that something went right, or perhaps to say that something needs to be reviewed.

Check the Lexicon Alerts Pattern for a more in-depth look at the motivations and proper usage of this component.

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-container container">
	<div class="alert-notifications alert-notifications-absolute">
		<div class="alert alert-dismissible alert-danger" role="alert">
			...
		</div>
	</div>
</div>

EMBEDDED

Embedded alerts are meant for use in forms. Usually you will only need to use the information one. 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
{call ClayAlert.render}
	{param message: 'This is an error message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'danger' /}
	{param title: 'Error' /}
{/call}

{call ClayAlert.render}
	{param message: 'This is a success message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'success' /}
	{param title: 'Success' /}
{/call}

{call ClayAlert.render}
	{param message: 'This is an info message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param title: 'Info' /}
{/call}

{call ClayAlert.render}
	{param message: 'This is a warning message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'warning' /}
	{param title: 'Warning' /}
{/call}
<clay-alert
	style="danger"
	message='This is an error message'
	spritemap="/images/icons/icons.svg"
	title="Error">
</clay-alert>

<clay-alert
	style="success"
	message='This is a success message'
	spritemap="/images/icons/icons.svg"
	title="Success">
</clay-alert>

<clay-alert
	message="This is an info message"
	spritemap="/images/icons/icons.svg"
	title="Info">
</clay-alert>

<clay-alert
	style="warning"
	message='This alert is a warning message'
	spritemap="/images/icons/icons.svg"
	title="Warning">
</clay-alert>
<div class="alert alert-danger" role="alert">
	<span class="alert-indicator">
		<svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#exclamation-full"></use>
		</svg>
	</span>
	<strong class="lead">Error:</strong>This is an error message
</div>

<div class="alert alert-success" role="alert">
	<span class="alert-indicator">
		<svg class="lexicon-icon lexicon-icon-check-circle-full" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#check-circle-full"></use>
		</svg>
	</span>
	<strong class="lead">Error:</strong>This is a success message
</div>

<div class="alert alert-info" role="alert">
	<span class="alert-indicator">
		<svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#info-circle"></use>
		</svg>
	</span>
	<strong class="lead">Error:</strong>This is an info message
</div>

<div class="alert alert-warning" role="alert">
	<span class="alert-indicator">
		<svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#warning-full"></use>
		</svg>
	</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
{call ClayStripe.render}
	{param message: 'This is an error message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'danger' /}
	{param title: 'Error' /}
{/call}

{call ClayStripe.render}
	{param message: 'This is a success message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'success' /}
	{param title: 'Success' /}
{/call}

{call ClayStripe.render}
	{param message: 'This is an info message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param title: 'Info' /}
{/call}

{call ClayStripe.render}
	{param message: 'This is a warning message' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'warning' /}
	{param title: 'Warning' /}
{/call}
<clay-stripe
	style="danger"
	message='This is an error message'
	spritemap="/images/icons/icons.svg"
	title="Error"
</clay-stripe>

<clay-stripe
	style="success"
	message='This is a success message'
	spritemap="/images/icons/icons.svg"
	title="Success"
></clay-stripe>

<clay-stripe
	message='This is an info message'
	spritemap="/images/icons/icons.svg"
	title="Info"
</clay-stripe>

<clay-stripe
	style="warning"
	message='This is a warning message'
	spritemap="/images/icons/icons.svg"
	title="Warning"
</clay-stripe>
<div class="alert alert-danger alert-dismissible alert-fluid" role="alert">
	<div class="container">
		<span class="alert-indicator">
			<svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#exclamation-full"></use>
			</svg>
		</span>
		<strong class="lead">Danger</strong> This is an error message
		<button aria-label="Close" class="close" data-dismiss="alert" type="button">
			<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times" />
			</svg>
		</button>
	</div>
</div>

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

<div class="alert alert-dismissible alert-fluid alert-info" role="alert">
	<div class="container">
		<span class="alert-indicator">
			<svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#info-circle"></use>
			</svg>
		</span>
		<strong class="lead">Info</strong> This is an info message
		<button aria-label="Close" class="close" data-dismiss="alert" type="button">
			<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times" />
			</svg>
		</button>
	</div>
</div>

<div class="alert alert-dismissible alert-fluid alert-warning" role="alert">
	<div class="container">
		<span class="alert-indicator">
			<svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#warning-full"></use>
			</svg>
		</span>
		<strong class="lead">Warning</strong> This is a warning message
		<button aria-label="Close" class="close" data-dismiss="alert" type="button">
			<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times" />
			</svg>
		</button>
	</div>
</div>

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.
{call ClayAlert.render}
	{param message kind="html"}
		This alert is a <a href="#">warning message</a>.
	{/param}

	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'warning' /}
	{param title: 'Warning' /}
{/call}
<clay-alert
	style="warning"
	message='This alert is a <a href="#">warning message</a>.' spritemap="/images/icons/icons.svg"
	title="Warning">
</clay-alert>
<div class="alert alert-warning" role="alert">
	<span class="alert-indicator">
		<svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#warning-full"></use>
		</svg>
	</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
{call ClayAlert.render}
	{param closeable: true /}
	{param message: This is a success closeable alert /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'success' /}
	{param title: 'Success' /}
{/call}
<clay-alert
	closeable="true"
	style="success"
	message='This is a success closeable alert'
	spritemap="/images/icons/icons.svg"
	title="Success">
</clay-alert>
<div class="alert alert-dismissible alert-success" role="alert">
	<span class="alert-indicator">
		<svg class="lexicon-icon lexicon-icon-check-circle-full" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#check-circle-full"></use>
		</svg>
	</span>
	<strong class="lead">Success:</strong> This is a success closeable alert
	<button aria-label="Close" class="close" data-dismiss="alert" type="button">
		<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#times" />
		</svg>
	</button>
</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>

API

ClayAlert

Property Description Type Required Default
closeable
Flag to indicate if the alert is closeable. bool false false
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
destroyOnHide
Flag to indicate if the alert should be destroyed when close. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
message
The message of alert html|string true undefined
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
style
The style of alert string false info
title
The title of alert string true undefined

ClayStripe

Property Description Type Required Default
autoClose
Flag to bool|number false false
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
destroyOnHide
Flag to indicate if the alert should be destroyed when close. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
message
The message of alert undefined undefined undefined
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
style
The style of alert string false info
title
The title of alert string true undefined

ClayToast

Property Description Type Required Default
autoClose
Flag to bool|number false false
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
destroyOnHide
Flag to indicate if the alert should be destroyed when close. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
message
The message of alert html|string true undefined
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
style
The style of alert string false info
title
The title of alert string true undefined

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.