Alert

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

free

Your changes have been saved.

Playground

color

variant

icon

HTML

<ply-alert variant="soft">Alert</ply-alert>

Default Alert

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

Some text for info alert

Some text for danger alert

Some text for success alert

Some text for accent alert

Some text for warning alert

HTML

<ply-alert color="primary">
  Some text for primary alert
</ply-alert>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-alert-example',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class AlertExampleComponent {}

Install

bash

npx ply-ui-cli add alert

Alerts with icons

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

Some text for info alert

Some text for danger alert

Some text for success alert

Some text for accent alert

Some text for warning alert

HTML

<ply-alert color="danger" icon="alert-triangle">
  Some text for danger alert
</ply-alert>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-alert-example',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class AlertExampleComponent {}

Install

bash

npx ply-ui-cli add alert

Alert with action buttons

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Some text for danger alert Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Some text for success alert Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

HTML

<ply-alert color="primary" icon="info-circle">
  Lorem ipsum dolor sit amet...
  <ply-alert-actions>
    <button ply-stroked-button plyAlertDismiss>Dismiss</button>
    <button ply-button>View More</button>
  </ply-alert-actions>
</ply-alert>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-alert-example',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class AlertExampleComponent {}

Install

bash

npx ply-ui-cli add alert

Alert with close button

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

Some text for info alert

Some text for danger alert

Some text for success alert

Some text for accent alert

Some text for warning alert

HTML

<ply-alert color="success" icon="check" close="true">
  Dismissible alert example
</ply-alert>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-alert-example',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class AlertExampleComponent {}

Install

bash

npx ply-ui-cli add alert

Alert Variants

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

Soft (Default)

Soft variant

Solid

Solid variant

Outline

Outline variant

HTML

<ply-alert color="primary" variant="solid">Solid Alert</ply-alert>
<ply-alert color="success" variant="outline">Outline Alert</ply-alert>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-alert-example',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class AlertExampleComponent {}

Install

bash

npx ply-ui-cli add alert

Auto-dismiss

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

This alert will disappear in 5 seconds.

HTML

<ply-alert color="success" [duration]="5000">
  Auto-dismissing alert
</ply-alert>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-alert-example',
  imports: [
    AlertActionsComponent,
    AlertComponent,
    AlertDismissDirective
  ],
  template: `...`
})
export class AlertExampleComponent {}

Install

bash

npx ply-ui-cli add alert

Installation

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

bash

npx ply-ui-cli add alert

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-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 {}

API for alert — generated from JSDoc in the library source.

API reference for alert
API	Member	Type	Default	Description
`ply-alert`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-alert`	`color`	`AlertColor`	`''`	—
`ply-alert`	`variant`	`AlertVariant`	`'soft'`	—
`ply-alert`	`icon`	`string \| undefined`	`undefined`	—
`ply-alert`	`close`	`boolean`	`false`	—
`ply-alert`	`duration`	`number`	`0`	—
`ply-alert`	`(closed)`	`void`	—	Emits when closed occurs.
`ply-alert-actions`	`—`	`—`	—	Container for action buttons within an alert component.
`[plyAlertDismiss]`	`—`	`—`	—	A directive that dismisses the parent `ply-alert` when clicked.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).