Import
import { AlertModule } from '@backbase/ui-ang/alert'
Usage
Use the bb-alert-ui component to display an alert. The title input is required.
<!-- Basic alert usage with title and modifier -->
<bb-alert-ui
[title]="'Information! Use this alert to introduce errors only'"
[modifier]="'error'">
</bb-alert-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
closeButtonAriaLabel |
string |
'Close alert' |
|
dismissible |
boolean |
false |
|
message |
string |
undefined |
|
modifier |
'warning' | 'error' | 'success' | 'info' |
'error' |
|
primaryActionButtonText |
string |
undefined |
|
supportiveLinkText |
string |
undefined |
|
title (required) |
string |
|
autofocus
The autofocus input determines whether the button in the alert is focused on initial load.
<!-- Alert with autofocus enabled -->
<bb-alert-ui
[autofocus]="true"
[title]="Alert title">
</bb-alert-ui>
dismissible
The dismissible input determines whether the alert can be dismissed by the user.
<!-- Dismissible alert -->
<bb-alert-ui
[dismissible]="true"
[title]="Alert title">
</bb-alert-ui>
message
The message input sets the message content of the alert.
<!-- Alert with a message -->
<bb-alert-ui
[message]="'This is an alert message.'"
[title]="Alert title">
</bb-alert-ui>
modifier
The modifier input sets the type of the alert. Possible values are 'warning', 'error', 'success', or 'info'.
<!-- Alert with modifier set to success -->
<bb-alert-ui
[modifier]="'success'"
[title]="Alert title">
</bb-alert-ui>
primaryActionButtonText
The primaryActionButtonText input sets the title of the primary action button.
<!-- Alert with a primary action button -->
<bb-alert-ui
[primaryActionButtonText]="'Confirm'"
[title]="Alert title">
</bb-alert-ui>
supportiveLinkText
The supportiveLinkText input sets the title of the supportive link button.
<!-- Alert with a supportive link -->
<bb-alert-ui
[supportiveLinkText]="'Learn more'"
[title]="Alert title">
</bb-alert-ui>
title
The title input sets the title of the alert. This input is required.
<!-- Alert with a custom title -->
<bb-alert-ui
[title]="Custom alert title"
[modifier]="info">
</bb-alert-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
close |
EventEmitter<void> |
Emits when the alert is closed |
|
primaryActionButtonClick |
EventEmitter<void> |
Emits when the primary action button is clicked |
|
supportiveLinkClick |
EventEmitter<void> |
Emits when the supportive link is clicked |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
closeButtonAriaLabel |
It sets the aria-label for the close button. |
string |