Alert

The alert component is used to inform users of important information or to provide feedback on an action they have taken. The component should be placed near the relevant content or form element it is associated with. The content of the alert should be clear, concise, and actionable.

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