Alert

Contextual feedback messages. Supports variants, sizes, and optional dismiss button.

Input	Type	Default	Description
`variant`	`'default' \| 'success' \| 'danger' \| 'warning'`	`'default'`	Visual style
`size`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Padding & font density
`dismissible`	`boolean`	`false`	Show dismiss button

Output	Type	Description
`dismissed`	`void`	Emitted when dismiss button is clicked

Import & Usage

typescript

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

@Component({
  selector: 'app-example',
  imports: [NgOatAlert],
  template: `
    <ng-oat-alert variant="success" size="compact">Saved!</ng-oat-alert>
    <ng-oat-alert variant="danger" [dismissible]="true" (dismissed)="onDismiss()">
      Something went wrong.
    </ng-oat-alert>
  `,
})
export class ExampleComponent {
  onDismiss() {
    console.log('Alert dismissed');
  }
}

All Variants

Default alert — neutral information.

Success — operation completed.

Danger — something went wrong.

Warning — proceed with caution.

html

<ng-oat-alert>Default alert — neutral information.</ng-oat-alert>
<ng-oat-alert variant="success">Success — operation completed.</ng-oat-alert>
<ng-oat-alert variant="danger">Danger — something went wrong.</ng-oat-alert>
<ng-oat-alert variant="warning">Warning — proceed with caution.</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">
  Compact — minimal padding for tight layouts.
</ng-oat-alert>
<ng-oat-alert variant="success">
  Default — balanced padding for most use cases.
</ng-oat-alert>
<ng-oat-alert size="comfortable" variant="success">
  Comfortable — extra breathing room for prominent alerts.
</ng-oat-alert>

Sizes × Variants

Compact default

Compact danger

Compact warning

Comfortable default

Comfortable danger

Comfortable warning

html

<ng-oat-alert size="compact">Compact default</ng-oat-alert>
<ng-oat-alert size="compact" variant="danger">Compact danger</ng-oat-alert>
<ng-oat-alert size="compact" variant="warning">Compact warning</ng-oat-alert>
<ng-oat-alert size="comfortable">Comfortable default</ng-oat-alert>
<ng-oat-alert size="comfortable" variant="danger">Comfortable danger</ng-oat-alert>
<ng-oat-alert size="comfortable" variant="warning">Comfortable warning</ng-oat-alert>

Dismissible

This alert can be dismissed. Click ✕ to close it.

html

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