Alert

Contextual feedback messages for typical user actions.

Bootstrap’s alert docs describe the markup and CSS.

Example

Put your message inside the alert. Without a theme, the alert uses neutral colors.

A simple alert—check it out!

HTML

<div bsAlert>
  <p>A simple alert—check it out!</p>
</div>

Themes

Set theme to any Bootstrap theme color. Use .alert-link for matching links.

A simple primary alert with an example link.

A simple accent alert with an example link.

A simple success alert with an example link.

A simple danger alert with an example link.

A simple warning alert with an example link.

A simple info alert with an example link.

A simple inverse alert with an example link.

A simple secondary alert with an example link.

<div class="vstack gap-3">
  @for (theme of themes; track theme) {
    <div bsAlert [theme]="theme">
      <p>A simple {{ theme }} alert with <a href="#" class="alert-link">an example link</a>.</p>
    </div>
  }
</div>

Dismissing

Add dismissible to show a close button. The alert fades out, gets the hidden attribute, and emits closed. To remove it from the DOM, wrap it in @if. Focus on the close button moves to the next control on the page, so keyboard users keep their place.

Something’s wrong. Check the fields below and try again.

@if (visible()) {
  <div bsAlert theme="warning" dismissible (closed)="visible.set(false)">
    <p>Something’s wrong. Check the fields below and try again.</p>
  </div>
} @else {
  <button type="button" bsButton="subtle" theme="secondary" (click)="visible.set(true)">
    Show the alert again
  </button>
}

Additional content

Alerts can contain headings, paragraphs and dividers.

Well done!

You successfully read this important alert message.

Use margin utilities to keep things nice and tidy.

HTML

<div bsAlert theme="success">
  <div class="vstack">
    <h3 class="alert-heading h4 mb-2">Well done!</h3>
    <p>You successfully read this important alert message.</p>
    <hr class="my-3" />
    <p class="mb-0">Use margin utilities to keep things nice and tidy.</p>
  </div>
</div>

API

BsAlert

Selector: [bsAlert] · Exported as: bsAlert

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the alert.
`dismissible`	`boolean`	`false`	Shows a close button.
`closeLabel`	`string`	`'Close'`	Accessible label of the close button.
`animation`	`boolean`	`true`	Fades the alert out when it closes.

Outputs

Name	Type	Description
`closing`	`void`	Emits when the alert starts to close.
`closed`	`void`	Emits after the alert is closed and its transition has finished.

Methods

Name	Type	Description
`close()`	`Promise<void>`	Closes the alert.
`isClosed`	`Signal<boolean>`	True after the alert has closed.