lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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>

Alert Group Banner

alert neutral read morealert accent read morealert success read morealert warning read morealert danger read more
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

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

NameTypesDescription
close

Properties

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
closablebooleandetermine user closable state
i18nset default aria/i18n strings

Attributes

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
closablebooleandetermine user closable state
i18nset default aria/i18n strings

CSS Properties

NameTypesDescription
--icon-color
--color

Slots

NameTypesDescription
defaultslot for content

bp-alert-group

Properties

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
type'banner'determine the visual styles for top/pinned banners

Attributes

NameTypesDescription
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
type'banner'determine the visual styles for top/pinned banners

CSS Properties

NameTypesDescription
--background
--color
--padding
--border-radius

Slots

NameTypesDescription
defaultslot for content