Alert

The alert component is used to inform users of important information or to provide feedback on an action they have taken.

Example

<script type="module">
  import '@blueprintui/components/include/alert.js';
</script>

<section bp-layout="block gap:sm">
  <bp-alert>alert</bp-alert>
  <bp-alert status="accent">alert accent</bp-alert>
  <bp-alert status="success">alert success</bp-alert>
  <bp-alert status="warning">alert warning</bp-alert>
  <bp-alert status="danger">alert danger</bp-alert>
</section>

Install

NPM

// npm package
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

Properties

Attributes

CSS Properties

Slots

bp-alert-group

Properties

Attributes

CSS Properties

Slots