Alert
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
<div class="k-alert k-alert--success">
<button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
You successfully read this important alert message.
</div>
<div class="k-alert k-alert--info">
<button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
This alert needs your attention, but it's not super important.
</div>
<div class="k-alert k-alert--warning">
<button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
Better check yourself, you're not looking too good.
</div>
<div class="k-alert k-alert--danger">
<button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
Change a few things up and try submitting again.
</div>
Alert with overflow
Add min-height (80px) and max-height (33%) to the alert when used above a list of items. This alert has flex-shrink.
Well done! You successfully read this important alert message.
Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.
<div class="k-alert k-alert--success k-alert--overflow">
<button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
<p><strong>Well done!</strong> You successfully read this important alert message.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
</div>
Fixed alert
Alert that sticks to the top of the UI
Well done! You successfully read this important alert message.
<div class="k-alert k-alert--success">
<button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
<p><strong>Well done!</strong> You successfully read this important alert message.</p>
</div>
<!-- Purely for demonstational purposes -->
<button class="k-button k-button--default" id="make-fixed" type="button">Toggle alert position</button>
<script data-inline>
document.querySelector('#make-fixed').onclick = function() {
this.parentNode.querySelector('.k-alert').classList.toggle('k-alert--fixed');
};
</script>