tabler/preview/modals.html

---
title: Modals
page-header: Modals
menu: base.modals
---

<div class="card">
	<div class="card-body">
		<div class="btn-list">
			{% include ui/button.html text="Simple modal" modal-id="simple" %}
			{% include ui/button.html text="Large modal" modal-id="large" %}
			{% include ui/button.html text="Small modal" modal-id="small" %}
			{% include ui/button.html text="Full width modal" modal-id="full-width" %}
			{% include ui/button.html text="Scrollable modal" modal-id="scrollable" %}
			{% include ui/button.html text="Modal with form" modal-id="report" %}
			{% include ui/button.html text="Success modal" modal-id="success" %}
			{% include ui/button.html text="Danger modal" modal-id="danger" %}
			{% include ui/button.html text="Modal with simple form" modal-id="team" %}
		</div>

	</div>
</div>

{% include ui/modal.html modal-id="simple" %}
{% include ui/modal.html modal-id="large" size="lg" %}
{% include ui/modal.html modal-id="small" size="sm" %}
{% include ui/modal.html modal-id="full-width" size="full-width" %}
{% include ui/modal.html modal-id="scrollable" scrollable=true %}
{% include ui/modal.html modal-id="report" size="lg" %}
{% include ui/modal.html modal-id="success" size="sm" %}
{% include ui/modal.html modal-id="danger" size="sm" %}
{% include ui/modal.html modal-id="team" %}