Status Box

You can stick this element to top when page scrolls using sui-box-sticky class.

Status Draft

Unsaved changes

Documentation

Main Content The status box is commonly used on builders (also known as wizards) for users to know when a change have been made and needs to be saved, or if all its changes are correctly saved.

<!--
NOTE:
Add here `sui-box-sticky` class to stick this element to top.
-->
<div class="sui-box">

	<div class="sui-box-status">

		<div class="sui-status">

			<div class="sui-status-module">Status <span class="sui-tag">Draft</span></div>

			<div class="sui-status-changes"><span class="sui-icon-update" aria-hidden="true"></span> Unsaved changes</div>

		</div>

		<div class="sui-actions">

			<button id="forminator-module-save" class="sui-button">
				<span class="sui-loading-text">
				<span class="sui-icon-save" aria-hidden="true"></span>
				<span class="button-text">Save Draft</span>
				</span>
				<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
			</button>

			<button id="forminator-module-publish" class="sui-button sui-button-blue">
				<span class="sui-loading-text">
				<span class="sui-icon-web-globe-world" aria-hidden="true"></span>
				<span class="button-text">Publish</span>
				</span>
				<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
			</button>

		</div>

	</div>

</div>