Alerts
Messages that tell people what happened
Tones
Info, success, warning and danger.
Success messageA short sentence that says what happened and what to do next.
Warning messageA short sentence that says what happened and what to do next.
Danger messageA short sentence that says what happened and what to do next.
Info messageA short sentence that says what happened and what to do next.
Code
<div class="alert alert-success" role="status">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div><b class="alert-title">Success message</b>A short sentence that says what happened and what to do next.</div>
</div>
<div class="alert alert-warning" role="status">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div><b class="alert-title">Warning message</b>A short sentence that says what happened and what to do next.</div>
</div>
<div class="alert alert-danger" role="alert">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div><b class="alert-title">Danger message</b>A short sentence that says what happened and what to do next.</div>
</div>
<div class="alert alert-info" role="status">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div><b class="alert-title">Info message</b>A short sentence that says what happened and what to do next.</div>
</div>Without a title
For short notes.
Your changes are saved automatically.
This workspace is read only until the trial ends.
Code
<div class="alert alert-info" role="status">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div>Your changes are saved automatically.</div>
</div>
<div class="alert alert-secondary" role="status">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div>This workspace is read only until the trial ends.</div>
</div>With an action
A button to fix the problem.
Your card expires soon
Update it before March 1 to keep your plan.
Code
<div class="alert alert-warning" role="status">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><div><b class="alert-title">Your card expires soon</b><div class="d-flex align-items-center justify-content-between flex-wrap gap-3"><span>Update it before March 1 to keep your plan.</span><button type="button" class="btn btn-warning btn-sm">Update card</button></div></div>
</div>