@synapse-ui/alert

Accessible Angular alert/banner component with four severity levels and an optional dismiss button.

Installation

npm install @synapse-ui/alert

Usage

import { Alert } from '@synapse-ui/alert';

@Component({
  imports: [Alert],
  template: `
    <synapse-alert severity="warning" title="Heads up" [dismissible]="true" (dismissed)="onDismiss()">
      Your session will expire in 5 minutes.
    </synapse-alert>
  `,
})
export class MyComponent {}

Inputs

| Input | Type | Default | Description | |---------------|---------------------------------------------|-------------|--------------------------------------| | severity | 'info' \| 'success' \| 'warning' \| 'error' | 'info' | Visual severity level | | title | string \| undefined | undefined | Optional bold heading | | dismissible | boolean | false | Shows a × dismiss button |

Outputs

| Output | Payload | Description | |-------------|---------|---------------------------------------| | dismissed | void | Emitted when the dismiss button is clicked |

Running unit tests

Run nx test alert to execute the unit tests.