BwAlert | bw-alert

Overview

Alerts are used to communicate important information to the user. They can be used to display success, error, warning, and informational messages. Alerts can be dismissed and presented.

Usage

Closable

Add the closable attribute to show a close icon that will hide the alert.

<bw-alert type="neutral" header="This is the alert header" message="This is the alert message" closable></bw-alert>

---

You can add custom html in the close position using the close slot.

more_vertsentiment_satisfied Action 1sentiment_dissatisfied Action 2

<bw-alert type="neutral" header="This is the alert header" message="This is the alert message">
  <bw-popover slot="close" dismiss-on-click="true">
    <bw-icon slot="trigger" size="sm">more_vert</bw-icon>
    <bw-menu>
      <bw-option>
        <bw-icon>sentiment_satisfied</bw-icon>
        Action 1
      </bw-option>
      <bw-option>
        <bw-icon>sentiment_dissatisfied</bw-icon>
        Action 2
      </bw-option>
    </bw-menu>
  </bw-popover>
</bw-alert>

Custom Content

You can add custom content to the header and message of the alert using their respective slots.

This is a custom header 😎This is a custom message 🎉

<bw-alert type="neutral" closable>
  <span slot="header">This is a custom header 😎</span>
  <span slot="message">This is a custom message 🎉</span>
</bw-alert>

Footer

Use the footer slot to add action items like buttons.

ConfirmCancel

<bw-alert type="neutral" header="This is the alert header" message="This is the alert message" closable>
  <div slot="footer">
    <bw-button variant="link">Confirm</bw-button>
    <bw-button variant="link" color="gray">Cancel</bw-button>
  </div>
</bw-alert>

Types

<bw-alert type="success" header="This is the alert header" message="This is the alert message" closable></bw-alert>
<bw-alert type="error" header="This is the alert header" message="This is the alert message" closable></bw-alert>
<bw-alert type="warning" header="This is the alert header" message="This is the alert message" closable></bw-alert>
<bw-alert type="informational" header="This is the alert header" message="This is the alert message" closable></bw-alert>
<bw-alert type="neutral" header="This is the alert header" message="This is the alert message" closable></bw-alert>

Properties

Property	Attribute	Description	Type	Default
closable	closable	Adds button in the close slot that dismisses alert	boolean	false
header	header	Header text for alert	string	undefined
message	message	Message text for alert	string	undefined
open	open	Opens and closes the alert	boolean	true
type	type	Determines alert color and icon shown	"error" | "informational" | "neutral" | "success" | "warning"	'informational'

Events

Event	Description	Type
alertClose	Emits when alert closes	CustomEvent<any>
alertOpen	Emits when alert opens	CustomEvent<any>

Slots

Slot	Description
"close"	Slot for close button content
"footer"	Slot for footer content
"header"	Slot for header content
"message"	Slot for message content

Shadow Parts

Part	Description
"content"	The content area
"content-container"	The container for the content

Dependencies

Depends on

• bw-icon

Graph

---

© 2025 United Systems & Software - All Rights Reserved.