Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

You successfully read this important alert message.
This alert needs your attention, but it's not super important.
Better check yourself, you're not looking too good.
Change a few things up and try submitting again.
<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>
    document.querySelector('#make-fixed').onclick = function() {
        this.parentNode.querySelector('.k-alert').classList.toggle('k-alert--fixed');
    };
</script>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.