> For the complete documentation index, see [llms.txt](https://docs-drift.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-drift.g-axon.work/components/alerts.md).

# Alerts

### Default Alert

{% tabs %}
{% tab title="Default Alert" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodMhrnqKmSn63sjjb8%2F-LodPgjCPwFZdOYzoPog%2Falert.png?alt=media\&token=6b1fd6cd-354c-4863-a7b8-f0be0c634a0e)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
</div>

<!-- 
Above is an example of primary alert. You can use the
BootStrap classes .alert-secondary, .alert-success,
.alert-danger, .alert-warning, .alert-info, .alert-light
and .alert-dark to generate the type of default alert
you want.
-->
```

{% endtab %}
{% endtabs %}

### Alert With Link

{% tabs %}
{% tab title="Alert with Link" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LodnjdB1QQjYSEW1ozc%2Falert-with-link.png?alt=media\&token=b203d3d4-4b07-4986-944f-d63401328c84)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="javascript:void(0)" class="alert-link">an
    example link</a>. Give it a click if you like.
</div>
```

{% endtab %}
{% endtabs %}

### Additional Content Alert

{% tabs %}
{% tab title="Additional Content Alerts" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Lodo3fwLtPsEOfyGMtC%2Fadditional-content-alert.png?alt=media\&token=caaf420e-cf38-4bec-a55b-b6af98692180)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">Well done!</h4>
	<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>
	<p class="mb-0">
		Whenever you need to, be sure to use margin utilities to keep
		things nice and	tidy.
	</p>
</div>
```

{% endtab %}
{% endtabs %}

### Dismissing Alert

{% tabs %}
{% tab title="Dismissing Alerts" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LodpdNvp9dttVOENGKn%2Fdismissing-alert.png?alt=media\&token=6da5f102-d3f8-4b34-bd37-016745146a6b)
{% endtab %}

{% tab title="Source Code" %}

```markup
<div class="alert alert-primary alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields
	below.
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
```

{% endtab %}
{% endtabs %}