Alert

The alert box takes the focus away from the current window, and forces the user to read the message.

free

Default Alert

Default Alert examples below. Use color="" to control <base-alert> color. Supported colors are "primary", "success", "danger", "warning" and "accent". >

Alerts with icons

Use icon="" to add an icon to <base-alert>. Choose any icon from our Icon Pack page.

Alert with action buttons

Add a <base-alert-actions> tag at the bottom and add one or multiple buttons for preferred actions. You can use the baseAlertDismiss directive on any button inside the actions to allow users to close the alert.

Alert with close button

Add close="true" to the <base-alert> to activate the default close (X) button. When the alert is closed, it emits a (closed) event.

Alert Variants

Alerts support three visual variants: soft (default), solid, and outline.

Auto-dismiss

Use the duration property to automatically close the alert after a specific amount of time (in milliseconds).

Installation

Run the following command to add this component to your project:

npx base-ui-cli add alert

npx -y base-ui-mcp

// Install: npx base-ui-cli add alert
// Paths are relative to aliases.components (default: src/app/components)
import { AlertActionsComponent } from './alert/alert-actions/alert-actions.component';
import { AlertDismissDirective } from './alert/alert-dismiss.directive';
import { AlertComponent } from './alert/alert.component';

@Component({
  selector: 'app-your-component',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class YourComponent {}