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

Name	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().

Name	Description
show(): void	Opens the alert
close(): void	Hides the alert
isOpen(): Promise<boolean>	Returns whether the alert is visible or not

CSS

Default

Brand

Info

Warning

Success

Error

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