Alerts Style SDK reference

In this article

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal.

Alerts style

Alerts primary

This is a primary alert — check it out!

<div class='alert is-primary'>This is a primary alert — check it out!</div>

Alerts secondary

This is a secondary alert — check it out!

<div class='alert is-secondary'>This is a secondary alert — check it out!</div>

Alerts success

This is a success alert — check it out!

<div class='alert is-success'>This is a secondary alert — check it out!</div>

Alerts danger

This is a danger alert — check it out!

<div class='alert is-danger'>This is a danger alert — check it out!</div>

Alerts warning

This is a warning alert — check it out!

<div class='alert is-warning'>This is a warning alert — check it out!</div>

Alerts info

This is a info alert — check it out!

<div class='alert is-info'>This is a info alert — check it out!</div>

Alerts color

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

This is a info alert with an example link. Give it a click if you like.

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

---

Validating Azure Key Vault threat detection in Microsoft Defender for Cloud.

<div class="alert is-success">
<p class="alert-title"><i class="bi bi-card-image"></i> Well done!</p>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr>
  <a href="#">Validating Azure Key Vault threat detection in Microsoft Defender for Cloud.</a>
</div>

Next steps

In this article, you learned about Alert Defender for Key Class style.

For related style, see the following articles:

• Table style
• Button style
• Shurtcode