Skip to main content

Alerts

<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

NameDescription
open: booleanInitial open/close state of the alert
dismissible: booleanAllow the alert to be closed

Methods

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

NameDescription
show(): voidOpens the alert
close(): voidHides the alert
isOpen(): Promise<boolean>Returns whether the alert is visible or not

CSS

<div role="alert" class="c-alert">
  <button class="c-button c-button--close">&times;</button>
  Default
</div>
<div role="alert" class="c-alert c-alert--brand">
  <button class="c-button c-button--close">&times;</button>
  Brand
</div>
<div role="alert" class="c-alert c-alert--info">
  <button class="c-button c-button--close">&times;</button>
  Info
</div>
<div role="alert" class="c-alert c-alert--warning">
  <button class="c-button c-button--close">&times;</button>
  Warning
</div>
<div role="alert" class="c-alert c-alert--success">
  <button class="c-button c-button--close">&times;</button>
  Success
</div>
<div role="alert" class="c-alert c-alert--error">
  <button class="c-button c-button--close">&times;</button>
  Error
</div>