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.