LP6 Style Guide: Alerts

Information Alert: .alert-info

Success Alert: .alert-success

Warning Alert: .alert-warning

Error Alert: .alert-error

HTML Code Snippet

					
<div role="alert" kind="info" class="alert">
	<div class="alert-details">
		<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true" class="alert-icon" style="will-change: transform;" aria-labelledby="info-icon-title" role="img">
			<title id="info-icon-title">info icon</title>
			<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,7Zm4,17.12H12V21.88h2.88V15.12H13V12.88h4.13v9H20Z"></path>
		</svg>
		<div class="alert-content">
			<p class="alert-title">Notification title</p>
			<div class="alert-subtitle">
				<span>Subtitle text goes here. <a href="#example">Example link</a></span>
			</div>
		</div>
	</div>
	<button type="button" aria-label="this a close button for the current alert" title="this a close button for the current alert" class="alert-close">
		<svg focusable="false" preserveAspectRatio="xMidYMid meet" aria-label="close notification" xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" role="img" class="alert-close-icon" style="will-change: transform;">
			<path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path>
		</svg>
	</button>
</div>
					
				

General Guidance

Use alerts to inform users of updates or changes to system status or important contextual information. Communicating with users and providing immediate feedback are important for building trust. While alerts are an effective method of communicating with users, they are disruptive and should be used sparingly.

Accessibility

Alerts are messages that communicate information to a user. The WAI-ARIA role="alert" is equivalent to aria-live="assertive". It is used to display a message to the user in a way that attracts the user’s attention without receiving focus to communicate the message without interrupting the users current task. If the notification does not contain an urgent message, consider changing it to aria-live="polite" so the notification is queued until whatever task the user is currently working on is complete.

The close button contains an ARIA label of aria-label="close", and the icon has aria-hidden="true" so it is ignored by assistive technologies. The Tab key is used to move focus to the close button within the notification and the Space key or Enter key activate the button to close the notification.

Semantic Markup

• Icon: Informs users of the type of notification at a glance.
• Title: Gives users a quick overview of the notification.
• Message (optional): Provides additional detail and actionable steps for the user to take.
• Close button (optional): Closes the notification.

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles. Button modifiers should be reserved for special use cases.