tabler/preview/pages/modals.html

---
title: Modals
page-header: Modals
page-menu: base.modals
layout: default
permalink: modals.html
---

<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" %}