The alert group component is used to inform users of important information or to provide feedback on an action they have taken. The content of the alert should be clear, concise, and actionable. Alert items within the same group should be related to each other.
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>
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 |
Properties
Name | Types | Description |
status | 'accent' | 'success' | 'warning' | 'danger' | |
closable | boolean | |
i18n |
| |
Attributes
Name | Types | Description |
status | 'accent' | 'success' | 'warning' | 'danger' | |
closable | boolean | |
i18n |
| |
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' | |
Attributes
Name | Types | Description |
status | 'accent' | 'success' | 'warning' | 'danger' | |
CSS Properties
Name | Types | Description |
--background |
| |
--color |
| |
--padding |
| |
--border-radius |
| |
Slots
Name | Types | Description |
default |
| slot for content |