> 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" %}
![](/files/-LodPgjCPwFZdOYzoPog)
{% 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" %}
![](/files/-LodnjdB1QQjYSEW1ozc)
{% 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" %}
![](/files/-Lodo3fwLtPsEOfyGMtC)
{% 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" %}
![](/files/-LodpdNvp9dttVOENGKn)
{% 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 %}