Installation
import { WrAlert } from 'ngwr/alert';
@Component({ imports: [WrAlert] })
export class MyComponent {}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
Omit title and the message renders as a single primary line.
<wr-alert message="Your changes are live." type="success" />
<wr-alert message="Connection lost." type="offline" />Custom icon
Override the default per-type icon with iconName.
<wr-alert iconName="sparkles" title="What's new" message="Smarter search just landed." />Closable
<wr-alert title="Saved" type="success" closable (closed)="onClose()" />Without icon
Pass [icon]="false" to suppress the leading status 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. | void | — |
CSS variables
Custom properties ngwr/alert publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-alert-bg | var(--wr-color-info-soft) | .wr-alert +3 variant overrides |
--wr-alert-border | transparent | .wr-alert |
--wr-alert-close | var(--wr-color-info) | .wr-alert +3 variant overrides |
--wr-alert-message | var(--wr-color-on-surface) | .wr-alert +2 variant overrides |
--wr-alert-title | var(--wr-color-info-ink) | .wr-alert +3 variant overrides |