The alert group component is used to inform users of important information or to provide feedback on an action they have taken.
Shows grouped alerts with various status types and closable functionality.
alert neutralalert accentalert successalert warningalert dangeralertalert
code
<script type="module">
import '@blueprintui/components/include/alert.js';
</script>
<section bp-layout="block gap:sm">
<bp-alert-group>
<bp-alert closable>alert neutral</bp-alert>
</bp-alert-group>
<bp-alert-group status="accent">
<bp-alert closable>alert accent</bp-alert>
</bp-alert-group>
<bp-alert-group status="success">
<bp-alert closable>alert success</bp-alert>
</bp-alert-group>
<bp-alert-group status="warning">
<bp-alert closable>alert warning</bp-alert>
</bp-alert-group>
<bp-alert-group status="danger">
<bp-alert closable>alert danger</bp-alert>
</bp-alert-group>
<bp-alert-group>
<bp-alert closable>alert</bp-alert>
<bp-alert closable>alert</bp-alert>
</bp-alert-group>
</section>
Alert Group Banner
Displays full-width banner alerts with links and closable functionality.
code
<script type="module">
import '@blueprintui/components/include/alert.js';
</script>
<section bp-layout="block gap:sm">
<bp-alert-group type="banner">
<bp-alert closable>alert neutral <a href="#" bp-text="link">read more</a></bp-alert>
</bp-alert-group>
<bp-alert-group type="banner" status="accent">
<bp-alert closable>alert accent <a href="#" bp-text="link">read more</a></bp-alert>
</bp-alert-group>
<bp-alert-group type="banner" status="success">
<bp-alert closable>alert success <a href="#" bp-text="link">read more</a></bp-alert>
</bp-alert-group>
<bp-alert-group type="banner" status="warning">
<bp-alert closable>alert warning <a href="#" bp-text="link">read more</a></bp-alert>
</bp-alert-group>
<bp-alert-group type="banner" status="danger">
<bp-alert closable>alert danger <a href="#" bp-text="link">read more</a></bp-alert>
</bp-alert-group>
</section>
Install
NPM
import '@blueprintui/components/include/alert.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm';
</script>
Accessibility
- Use clear, descriptive text for the alert message that communicates the purpose of the alert.
- Use the appropriate alert status to indicate the severity of the alert.
- Use aria-live attribute to indicate the importance and relevance of the alert message.
- Provide an option for user to dismiss the alert, if applicable.
- Avoid using the title attribute, as it is not read by screen readers.
bp-alert
Events
| Name | Types | Description |
|---|
| | close |
| | open |
Properties
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the alert, affecting its color, icon, and semantic meaning |
closable | boolean | Controls whether the alert displays a close button, allowing users to dismiss it |
hidden | boolean | Controls the visibility state of the alert, hiding it from view when set to true |
i18n | | Provides internationalization strings for accessibility labels and screen reader announcements |
Attributes
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the alert, affecting its color, icon, and semantic meaning |
closable | boolean | Controls whether the alert displays a close button, allowing users to dismiss it |
hidden | boolean | Controls the visibility state of the alert, hiding it from view when set to true |
i18n | | Provides internationalization strings for accessibility labels and screen reader announcements |
CSS Properties
| Name | Types | Description |
|---|
--icon-color | | |
--color | | |
Slots
| Name | Types | Description |
|---|
default | | slot for content |
bp-alert-group
Properties
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
type | 'banner' | determine the visual styles for top/pinned banners |
Attributes
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
type | 'banner' | determine the visual styles for top/pinned banners |
CSS Properties
| Name | Types | Description |
|---|
--background | | |
--color | | |
--padding | | |
--border-radius | | |
Slots
| Name | Types | Description |
|---|
default | | slot for content |