Alert

A callout box with title, description and optional action.

import { … } from '@inlaylab/ivorie/alert'

Heads up

You can change your display name in settings.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';

@Component({
  selector: 'demo-alert',
  imports: [IV_ALERT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-alert class="w-full max-w-md">
      <iv-alert-title>Heads up</iv-alert-title>
      <iv-alert-description>You can change your display name in settings.</iv-alert-description>
    </iv-alert>
  `,
})
export default class AlertDemo {}

Installation

CLI

npm

npx ivorie add alert

import { … } from '@inlaylab/ivorie/alert'

Usage

import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';

<iv-alert>
  <iv-alert-title>Heads up</iv-alert-title>
  <iv-alert-description>You can change your name in settings.</iv-alert-description>
</iv-alert>

Examples

Destructive

Session expired

Please sign in again to continue.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';

@Component({
  selector: 'demo-alert-destructive',
  imports: [IV_ALERT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-alert variant="destructive" class="w-full max-w-md">
      <iv-alert-title>Session expired</iv-alert-title>
      <iv-alert-description>Please sign in again to continue.</iv-alert-description>
    </iv-alert>
  `,
})
export default class AlertDestructiveDemo {}

Warning

Approaching limit

You have used 90% of your monthly quota.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';

@Component({
  selector: 'demo-alert-warning',
  imports: [IV_ALERT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-alert variant="warning" class="w-full max-w-md">
      <iv-alert-title>Approaching limit</iv-alert-title>
      <iv-alert-description>You have used 90% of your monthly quota.</iv-alert-description>
    </iv-alert>
  `,
})
export default class AlertWarningDemo {}

Success

Changes saved

Your profile has been updated.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';

@Component({
  selector: 'demo-alert-success',
  imports: [IV_ALERT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-alert variant="success" class="w-full max-w-md">
      <iv-alert-title>Changes saved</iv-alert-title>
      <iv-alert-description>Your profile has been updated.</iv-alert-description>
    </iv-alert>
  `,
})
export default class AlertSuccessDemo {}

Info

Maintenance window

Scheduled downtime on Sunday, 2 AM to 4 AM UTC.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';

@Component({
  selector: 'demo-alert-info',
  imports: [IV_ALERT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-alert variant="info" class="w-full max-w-md">
      <iv-alert-title>Maintenance window</iv-alert-title>
      <iv-alert-description>Scheduled downtime on Sunday, 2 AM to 4 AM UTC.</iv-alert-description>
    </iv-alert>
  `,
})
export default class AlertInfoDemo {}

With icon

Error

Your session has expired.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';
import { LucideCircleAlert } from '@lucide/angular';

@Component({
  selector: 'demo-alert-icon',
  imports: [IV_ALERT_IMPORTS, LucideCircleAlert],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-alert variant="destructive" class="w-full max-w-md">
      <svg lucideCircleAlert></svg>
      <iv-alert-title>Error</iv-alert-title>
      <iv-alert-description>Your session has expired.</iv-alert-description>
    </iv-alert>
  `,
})
export default class AlertIconDemo {}

With action

Update available

A new version is ready to install.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { IV_ALERT_IMPORTS } from '@inlaylab/ivorie/alert';
import { IvButton } from '@inlaylab/ivorie/button';
import { LucideX } from '@lucide/angular';

@Component({
  selector: 'demo-alert-action',
  imports: [IV_ALERT_IMPORTS, IvButton, LucideX],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (open()) {
      <iv-alert class="w-full max-w-md">
        <iv-alert-title>Update available</iv-alert-title>
        <iv-alert-description>A new version is ready to install.</iv-alert-description>
        <iv-alert-action>
          <button ivButton size="icon-xs" variant="ghost" aria-label="Dismiss" (click)="open.set(false)">
            <svg lucideX></svg>
          </button>
        </iv-alert-action>
      </iv-alert>
    }
  `,
})
export default class AlertActionDemo {
  protected readonly open = signal(true);
}

API

Every part also accepts class.

iv-alert

Name	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'warning' \| 'success' \| 'info'`	`'default'`	Colour scheme.

Other parts

No inputs besides class: iv-alert-title, iv-alert-description, iv-alert-action.

Accessibility

iv-alert has role="alert", so screen readers announce it when it appears. Do not use colour alone to carry meaning.

Notes

Put an svg as a direct child of iv-alert for an icon. The title and description shift beside it.
iv-alert-action sits at the top right. The alert adds right padding when it is present.
warning, success and info use fixed Tailwind colours (yellow, green, blue), not theme tokens.