Alert

Contextual feedback messages with automatic SVG icon, title, and description support.

Input	Type	Default	Description
`variant`	`'default' \| 'info' \| 'success' \| 'danger' \| 'warning'`	`'default'`	Visual style — also determines the SVG icon
`title`	`string`	`''`	Bold heading text
`description`	`string`	`''`	Secondary description text
`showIcon`	`boolean`	`true`	Show/hide the default variant icon
`iconTpl`	`TemplateRef`	—	Custom icon template (overrides default)
`size`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Padding density
`dismissible`	`boolean`	`false`	Show dismiss button

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatAlert } from '@letsprogram/ng-oat/alert';

@Component({
  selector: 'app-example',
  imports: [NgOatAlert],
  template: `
    <!-- Each variant automatically shows the correct SVG icon -->
    <ng-oat-alert variant="success" title="Saved!" description="Your changes have been saved." />

    <ng-oat-alert variant="danger" title="Error" [dismissible]="true" (dismissed)="onDismiss()">
      Something went wrong.
    </ng-oat-alert>
  `,
})
export class ExampleComponent {
  onDismiss() {
    console.log('Alert dismissed');
  }
}

All Variants

Default alert — neutral information.

Heads up

This is an informational alert.

Success

Operation completed successfully.

Error

Something went wrong.

Warning

Proceed with caution.

html

<ng-oat-alert>Default alert — neutral information.</ng-oat-alert>
<ng-oat-alert variant="info" title="Heads up">This is an informational alert.</ng-oat-alert>
<ng-oat-alert variant="success" title="Success">Operation completed successfully.</ng-oat-alert>
<ng-oat-alert variant="danger" title="Error">Something went wrong.</ng-oat-alert>
<ng-oat-alert variant="warning" title="Warning">Proceed with caution.</ng-oat-alert>

With Title & Description

New message

You have 3 unread messages in your inbox.

Deployment complete

Your application has been deployed to production successfully.

Access denied

You do not have permission to perform this action. Contact your administrator.

html

<ng-oat-alert variant="info" title="New message"
  description="You have 3 unread messages in your inbox." />

<ng-oat-alert variant="success" title="Deployment complete"
  description="Your application has been deployed to production." />

<ng-oat-alert variant="danger" title="Access denied"
  description="You do not have permission. Contact your administrator." />

Without Icon

No icon

Set showIcon to false to hide the default variant icon.

A plain warning with no icon or title — just ng-content.

html

<ng-oat-alert variant="info" [showIcon]="false" title="No icon">
  Set showIcon to false to hide the default variant icon.
</ng-oat-alert>
<ng-oat-alert variant="warning" [showIcon]="false">
  A plain warning with no icon or title.
</ng-oat-alert>

Size Variants

Compact

Minimal padding for tight layouts.

Default

Balanced padding for most use cases.

Comfortable

Extra breathing room for prominent alerts.

html

<ng-oat-alert size="compact" variant="success" title="Compact">
  Minimal padding for tight layouts.
</ng-oat-alert>
<ng-oat-alert variant="success" title="Default">
  Balanced padding for most use cases.
</ng-oat-alert>
<ng-oat-alert size="comfortable" variant="success" title="Comfortable">
  Extra breathing room for prominent alerts.
</ng-oat-alert>

Dismissible

Error occurred

This alert can be dismissed. Click the × button to close it.

html

<ng-oat-alert
  variant="danger"
  title="Error occurred"
  [dismissible]="true"
  (dismissed)="onDismiss()">
  This alert can be dismissed.
</ng-oat-alert>