Alert

Default

Use .alert to display a static feedback message.

Background colors

Combine .alert with background color utilities.

<div class="alert bg-primary">alert primary</div>
<div class="alert bg-secondary">alert secondary</div>
<div class="alert bg-success">alert success</div>
<div class="alert bg-warning">alert warning</div>
<div class="alert bg-error">alert error</div>
<div class="alert bg-inverse text-inverse">alert inverse</div>

With content

Use .alert-content, .alert-title and .alert-message to structure alert content.

<div class="alert bg-success" role="alert">
	<div class="alert-content">
		<p class="alert-title">Success</p>
		<p class="alert-message">Your changes were saved successfully.</p>
	</div>
</div>

With action

Use .alert-actions to add one or more actions.

<div class="alert bg-warning" role="alert">
	<div class="alert-content">
		<p class="alert-title">Warning</p>
		<p class="alert-message">Please review your settings before continuing.</p>
	</div>

	<div class="alert-actions">
		<button class="btn btn-text alert-action" type="button">Review</button>
	</div>
</div>

Closable

Use .alert-close to place a close button at the end of the alert.

<div class="alert bg-error" role="alert">
	<div class="alert-content">
		<p class="alert-title">Error</p>
		<p class="alert-message">Something went wrong.</p>
	</div>

	<button class="alert-close icon-btn icon-btn-text" type="button" aria-label="Close alert">×</button>
</div>

With action and close

Actions and close buttons can be combined.

<div class="alert bg-primary" role="alert">
	<div class="alert-content">
		<p class="alert-title">Update available</p>
		<p class="alert-message">A new version is ready to install.</p>
	</div>

	<div class="alert-actions">
		<button class="btn btn-text alert-action" type="button">Install</button>
	</div>

	<button class="alert-close icon-btn icon-btn-text" type="button" aria-label="Close alert">×</button>
</div>