import { Component } from '@angular/core';
import { WrAlert } from 'ngwr/alert';
@Component({ imports: [WrAlert] })
export class MyComponent {}Alert
An inline status message.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
<wr-alert title="Heads up" message="Your trial ends in 3 days." />Types
<wr-alert title="Info" type="info" />
<wr-alert title="Success" type="success" />
<wr-alert title="Warning" type="warning" />
<wr-alert title="Danger" type="danger" />
<wr-alert title="Neutral" type="neutral" />
<wr-alert title="Offline" type="offline" />With title
Pair a title with a secondary message.
<wr-alert title="Update available" message="Version 2.0 is ready to install." type="info" />Without title
Without a title, the message is the only line.
<wr-alert message="Your changes are live." type="success" />
<wr-alert message="Connection lost." type="offline" />Custom icon
iconName replaces the icon of the type.
<wr-alert iconName="sparkles" title="What's new" message="Smarter search just landed." />Closable
closable adds a close button; (closed) fires when it hides the alert.
<wr-alert title="Saved" type="success" closable (closed)="onClose()" />Without icon
[icon]="false" hides the icon.
<wr-alert title="Plain" message="No leading icon." [icon]="false" />API
| Name | Description | Type | Default |
|---|---|---|---|
closeLabel | Accessible name. Falls back to alert.close, then 'Close alert'. | string | null | null |
title | Optional headline shown at the top of the alert. | string | null | null |
type | Visual variant. | WrAlertType | 'info' |
iconName | Override the default per-type icon with any ngwr icon name. | WrIconName | null | null |
message | Optional secondary message rendered below the title. | string | null | null |
icon | When true, renders a leading status icon matching the type. Pass false to hide. Ignored when iconName is set. | boolean | true |
closable | When true, renders a close button. | boolean | false |
(closed) | Emitted when the user dismisses the alert via the close button. If the close button had focus, focus moves on to the next focusable element after the alert (or the one before it, when nothing follows) — unless a (closed) handler has placed it somewhere itself. | void | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/alert's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-alert-bg | var(--wr-color-info-soft) | .wr-alert +3 variant overrides |
--wr-alert-body-gap | var(--wr-space-xs) | .wr-alert |
--wr-alert-border | transparent | .wr-alert |
--wr-alert-close | var(--wr-color-info) | .wr-alert +3 variant overrides |
--wr-alert-close-padding | var(--wr-space-xs) | .wr-alert |
--wr-alert-close-radius | var(--wr-border-radius-sm) | .wr-alert |
--wr-alert-font-family | var(--wr-font-family-base) | .wr-alert |
--wr-alert-gap | var(--wr-space-md) | .wr-alert |
--wr-alert-icon-margin-top | var(--wr-space-xs) | .wr-alert |
--wr-alert-message | var(--wr-color-on-surface) | .wr-alert +2 variant overrides |
--wr-alert-message-font-size | var(--wr-text-sm) | .wr-alert |
--wr-alert-message-line-height | var(--wr-text-sm-leading) | .wr-alert |
--wr-alert-padding-x | var(--wr-space-lg) | .wr-alert |
--wr-alert-padding-y | var(--wr-space-md) | .wr-alert |
--wr-alert-radius | var(--wr-border-radius-base) | .wr-alert |
--wr-alert-title | var(--wr-color-info-ink) | .wr-alert +3 variant overrides |
--wr-alert-title-font-size | var(--wr-text-sm) | .wr-alert |
--wr-alert-title-font-weight | var(--wr-font-weight-semibold) | .wr-alert |
--wr-alert-title-line-height | var(--wr-text-sm-leading) | .wr-alert |
Dependencies
| Built on | Icon |
|---|