Alert

Default

Use .alert for static feedback.

Background colors

Combine .alert with a background utility.

<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">alert inverse</div>

With content

Use .alert-content, .alert-title and .alert-message for structured 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>

Closable

Use .alert-close for the close action.

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

CSS Variables

Override these variables on the component or an ancestor.

--alert-padding-y: var(--spacer-3);
--alert-padding-x: var(--spacer-3);
--alert-bg-color: var(--bg-surface);
--alert-color: var(--text-color);
--alert-border-width: var(--border-width);
--alert-border-color: var(--border-color);
--alert-border-radius: var(--border-radius);
--alert-gap: var(--spacer-2);