ui:message | Lightning Components Developer’s Guide

The severity attribute indicates a message's severity level and determines the style to use when displaying the message. If the closable attribute is set to true, the message can be dismissed by pressing the × symbol.

This example shows a success message when a condition evaluates to true or an error message otherwise.

1<aura:component>
2    <aura:attribute name="myBool" type="Boolean" default="true"/>
3    
4    <aura:renderIf isTrue="!{v.myBool}">
5        <ui:message title="Success" severity="confirm">
6           The operation is successful.
7        </ui:message>
8        <aura:set attribute="else">
9            <ui:message title="Error" severity="error">
10                This is an error.
11            </ui:message>
12        </aura:set>
13    </aura:renderIf>
14</aura:component>

This example shows messages in varying severity levels.

1<aura:component access="global">
2 <ui:message title="Confirmation" severity="confirm" closable="true">
3   This is a confirmation message.
4 </ui:message>
5 <ui:message title="Information" severity="info" closable="true">
6   This is a message.
7 </ui:message>
8 <ui:message title="Warning" severity="warning" closable="true">
9   This is a warning.
10 </ui:message>
11 <ui:message title="Error" severity="error" closable="true">
12   This is an error message.
13 </ui:message>
14 
15</aura:component>

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`closable`	Boolean	Specifies whether to display an 'x' that will close the alert when clicked. Default value is 'false'.
`severity`	String	The severity of the message. Possible values: message (default), confirm, info, warning, error
`title`	String	The title text for the message.

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.