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">
    <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.

<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.

Join 23000+ others and subscribe to our newsletter!