Alert

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

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="k-alert k-alert--success">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<div class="k-alert k-alert--info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

<div class="k-alert k-alert--warning">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<div class="k-alert k-alert--danger">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Alert with overflow

Add min-height (75px) 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.
<div class="k-alert k-alert--success k-alert--overflow">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Need Help?

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