Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Confirm Dialog

The standard confirmation dialog.

Colored Alerts

Alert dialogs with semantic colors for error and warning states.

Input Dialog

A dialog that includes input fields for user interaction.

API Reference

Brain API

The brain directives provide the functional logic and state management for the alert dialog.

DirectiveSelectorInputs / Outputs
BrnAlertDialog[brnAlertDialog], brn-alert-dialogMain container directive. Inherits from BrnDialog.
BrnAlertDialogTriggerbutton[brnAlertDialogTrigger]
  • brnAlertDialogTriggerFor: BrnAlertDialog
BrnAlertDialogContent[brnAlertDialogContent]Structural directive for the dialog content.
BrnAlertDialogTitle[brnAlertDialogTitle]Directive for the accessible title.
BrnAlertDialogDescription[brnAlertDialogDescription]Directive for the accessible description.

Installation & Usage

Installation

Imports

Basic Skeleton

Helm API

The helm directives provide the default spartan/ui styling for the alert dialog.

Component / DirectiveSelectorDescription
HlmAlertDialoghlm-alert-dialogMain styling container.
HlmAlertDialogTrigger[hlmAlertDialogTrigger]Styled trigger button.
HlmAlertDialogContenthlm-alert-dialog-contentStyled content area with animations and shadows.
HlmAlertDialogHeaderhlm-alert-dialog-headerStyled header container.
HlmAlertDialogFooterhlm-alert-dialog-footerStyled footer container for actions.
HlmAlertDialogTitle[hlmAlertDialogTitle]Styled title with semi-bold font.
HlmAlertDialogDescription[hlmAlertDialogDescription]Styled description with muted text.
HlmAlertDialogAction[hlmAlertDialogAction]Directive for the primary action button.
HlmAlertDialogCancel[hlmAlertDialogCancel]Directive for the cancel/secondary button.