The alert group component is used to inform users of important information or to provide feedback on an action they have taken.
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
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' | determine the visual status state |
closable | boolean | determine user closable state |
hidden | boolean | determine user hidden state |
i18n | | set default aria/i18n strings |
Attributes
| Name | Types | Description |
|---|
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
closable | boolean | determine user closable state |
hidden | boolean | determine user hidden state |
i18n | | set default aria/i18n strings |
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 |