Import
import { EmptyStateModule } from '@backbase/ui-ang/empty-state'
Usage
Use the bb-empty-state-ui component to insert an empty state and access its API.
Custom configuration
If you need an empty state with a custom image, title, subtitle, or button text, you can create your own configuration using the available inputs. This is ideal when your use case doesn’t match any of the existing presets.
<!-- Basic empty state with custom image and title -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryActionText]="'Try again'"
(primaryActionClick)="onPrimaryActionClick($event)"
></bb-empty-state-ui>
Preset configuration
If your empty state scenario matches something common—like no internet or no transactions—you can use one of the predefined presets. These come with built-in localization and ensure visual and messaging consistency across the app.
<!-- Empty state using preset configuration -->
<bb-empty-state-ui preset="no_results_found"></bb-empty-state-ui>
Custom button templates
Use this pattern when you want full control over the button layout, such as adding icons or custom content inside the buttons. This works well for more complex or visually driven actions.
<!-- Empty state with custom button templates -->
<bb-empty-state-ui
image="ic_asset_coffee"
title="Page couldn't load"
subtitle="Try to reload the page or contact the system administrator."
[showPrimaryAction]="true"
[showSecondaryAction]="true"
[primaryBtnTemplate]="primaryTemplate"
[secondaryBtnTemplate]="secondaryTemplate"
(primaryActionClick)="reload()"
(secondaryActionClick)="addNew()">
</bb-empty-state-ui>
<ng-template #primaryTemplate>
<bb-icon-ui name="redo" size="sm"></bb-icon-ui>
Reload
</ng-template>
<ng-template #secondaryTemplate>
<bb-icon-ui name="add" size="sm"></bb-icon-ui>
Add New
</ng-template>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
image |
string |
— |
|
preset |
EmptyStatePresetType<string> |
— |
|
primaryActionText |
string |
— |
|
primaryBtnTemplate |
TemplateRef<any> | undefined |
— |
|
secondaryActionText |
string |
— |
|
secondaryBtnTemplate |
TemplateRef<any> | undefined |
— |
|
showPrimaryAction |
boolean |
false |
|
showSecondaryAction |
boolean |
false |
|
subtitle |
string |
— |
|
title |
string |
— |
image
The image input sets the illustration to be displayed in the empty state. This input is required when not using a preset and must be a valid illustration name supported by the Illustration component.
<!-- Empty state with custom illustration -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryActionText]="'Try again'"
(primaryActionClick)="primaryActionClick($event)"
></bb-empty-state-ui>
preset
The preset input allows using predefined empty state configurations. When set, it automatically provides title, subtitle, image, and actions. You can explore all available presets by adjusting the Storybook inputs in the example below.
<!-- Empty state using built-in preset -->
<bb-empty-state-ui
[preset]="'consents'"
(primaryActionClick)="primaryActionClick($event)"
></bb-empty-state-ui>
Available presets
|
Preset Type |
Use Case |
|---|---|
|
unknown_error_personal |
Generic error when something went wrong |
|
unknown_error_organisation |
Generic error when something went wrong |
|
no_internet |
When connectivity issues occur |
|
operation_timeout |
When processes exceed time limits |
|
no_results_found |
When no results were found |
|
transactions |
When transaction list is empty |
|
payment_not_found |
When specific payments are missing |
|
upcoming_payments |
When no scheduled payment are available |
|
cards |
When user has no payment cards |
|
cashflow |
When there’s no cashflow data to show |
|
budgets |
When user has no budgets created |
|
pockets |
When user has no pockets created |
|
transaction_limits |
When user has no transaction limits |
|
notifications |
When user doesn’t have any notifications |
|
no_contacts |
When user doesn’t have any saved contacts |
|
no_conversations |
When user doesn’t have any past conversations |
|
permissions |
When user lacks required access |
|
consents |
When user has no active consents |
|
insights |
When there's no insights data available |
|
data_found |
When no data is available |
|
batches |
When there are no batch processes to display |
|
sweeps |
When user has no automated transfer sweeps |
|
nothing_to_approve |
When there are no items waiting for approval |
|
user |
When user list is empty |
|
location |
When no branch locations are found |
primaryActionText
The primaryActionText input sets the text content for the primary action button.
<!-- Empty state with custom primary button text -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryActionText]="'Try again'"
(primaryActionClick)="primaryActionClick($event)"
></bb-empty-state-ui>
primaryBtnTemplate
The primaryBtnTemplate input allows providing custom content for the primary action button, such as icons. You can use this input when you want full control over the logic and presentation of your primary button.
<!-- Empty state with custom primary button template -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryBtnTemplate]="primaryTemplate"
(primaryActionClick)="primaryActionClick($event)"
>
</bb-empty-state-ui>
<ng-template #primaryTemplate>
<bb-icon-ui name="add" size="sm"></bb-icon-ui>
Primary Button
</ng-template>
secondaryActionText
It sets the label of the Button corresponding to the secondary action.
<!-- Empty state with custom secondary button text -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryActionText]="'Try again'"
[showSecondaryAction]="true"
[secondaryActionText]="'Go back'"
(primaryActionClick)="primaryActionClick($event)"
(secondaryActionClick)="secondaryActionClick($event)"
></bb-empty-state-ui>
secondaryBtnTemplate
The secondaryBtnTemplate input allows providing custom content for the secondary action button, such as icons. You can use this input when you want full control over the logic and presentation of your primary button.
<!-- Empty state with custom secondary button template -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showSecondaryAction]="true"
[secondaryBtnTemplate]="secondaryTemplate"
(secondaryActionClick)="secondaryActionClick($event)"
>
</bb-empty-state-ui>
<ng-template #secondaryTemplate>
<bb-icon-ui name="redo" size="sm"></bb-icon-ui>
Secondary Button
</ng-template>
showPrimaryAction
The showPrimaryAction input controls visibility of the primary action button.
<!-- Empty state with primary action enabled -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryActionText]="'Try again'"
(primaryActionClick)="primaryActionClick($event)"
></bb-empty-state-ui>
showSecondaryAction
The showSecondaryAction input controls visibility of the secondary action button.
<!-- Empty state with secondary action enabled -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="'Try again or contact us if the problem continues'"
[showPrimaryAction]="true"
[primaryActionText]="'Try again'"
(primaryActionClick)="primaryActionClick($event)"
[showSecondaryAction]="true"
[secondaryActionText]="'Go back'"
(secondaryActionClick)="secondaryActionClick($event)"
></bb-empty-state-ui>
subtitle
The subtitle input sets the descriptive text below the title. Subtitles also support HTML content.
<!-- Empty state with HTML subtitle content -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'Something went wrong'"
[subtitle]="We're experiencing <strong>problems</strong>"
></bb-empty-state-ui>
title
The title input sets the main heading text for the empty state. This input is required when not using a preset.
<!-- Empty state with custom title -->
<bb-empty-state-ui
[image]="'ic_asset_coffee'"
[title]="'No pending items'"
[subtitle]="'We're experiencing problems'"
></bb-empty-state-ui>
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.
|
Prop |
Description |
Default |
|---|---|---|
|
role |
Sets the ARIA role for the empty state container, defining its purpose for assistive devices. |
"status" |