Alerts

Default
Brand
Info
Warning
Success
Error
<div class="c-alert">
  <button class="c-button c-button--close">&times;</button>
  Default
</div>
<div class="c-alert c-alert--brand">
  <button class="c-button c-button--close">&times;</button>
  Brand
</div>
<div class="c-alert c-alert--info">
  <button class="c-button c-button--close">&times;</button>
  Info
</div>
<div class="c-alert c-alert--warning">
  <button class="c-button c-button--close">&times;</button>
  Warning
</div>
<div class="c-alert c-alert--success">
  <button class="c-button c-button--close">&times;</button>
  Success
</div>
<div class="c-alert c-alert--error">
  <button class="c-button c-button--close">&times;</button>
  Error
</div> 
Default Brand Info Warning Success Error (also not dismissible)
<blaze-alert open dismissible>Default</blaze-alert>
<blaze-alert open dismissible type="brand">Brand</blaze-alert>
<blaze-alert open dismissible type="info">Info</blaze-alert>
<blaze-alert open dismissible type="warning">Warning</blaze-alert>
<blaze-alert open dismissible type="success">Success</blaze-alert>
<blaze-alert open type="error">Error (also not dismissible)</blaze-alert> 

Attributes

Attribute Description
open (boolean) Initial open/close state of the alert
dismissible (boolean) Allow the alert to be closed

Methods

To access public methods on the element first select it using document.querySelector() .

Method Description
show() Opens the alert
close() Hides the alert
isOpen() Returns true or false