{{#markdown}}
Alerts have an optional **close button** and **icon**.<br />
Several kinds of alert: **info**, **success**, **error**, **form-error**, **notification**, **premium**
</ul>
{{/markdown}}

{{category}}

{{#each data}}
<div class="bx-alert bx-alert-{{this}} mbs">
  <button data-event="click" data-comp="alert" class="bx-alert-close">
    <i class="vicon vicon-close"></i>
  </button>

  {{#is this 'default'}}
    <i class="vicon vicon-information bx-alert-icon">
  {{/is}}
  {{#is this 'warning'}}
    <i class="vicon vicon-information bx-alert-icon">
  {{/is}}
  {{#is this 'error'}}
    <i class="vicon vicon-information bx-alert-icon">
  {{/is}}
  {{#is this 'error-form'}}
    <i class="vicon vicon-information bx-alert-icon">
  {{/is}}
  {{#is this 'ok'}}
    <i class="vicon vicon-check bx-alert-icon">
  {{/is}}
  {{#is this 'notification'}}
    <i class="vicon vicon-degree bx-alert-icon">
  {{/is}}
  {{#is this 'premium'}}
    <i class="vicon vicon-premium bx-alert-icon">
  {{/is}}
  </i>

  <div class="bx-alert-content">
    <p class="mbn">{{uppercase this}} Message...</p>
  </div>
</div>
{{/each}}

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div class="bx-alert bx-alert-ok mbs">
  <button data-event="click" data-comp="alert" class="bx-alert-close bootnode">
    <i class="vicon vicon-close"></i>
  </button>

  <i class="vicon vicon-information bx-alert-icon"></i>

  <div class="bx-alert-content">
    <p class="mbn">Success message...</p>
  </div>
</div>
```
{{/markdown}}
{{> copy-code}}
</div>