Import
import { IllustrationModule } from '@backbase/ui-ang/illustration'
Usage
Use the bb-illustration-ui component to display an illustration by specifying its name and size.
<!-- Basic illustration usage -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }">
</bb-illustration-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
alt |
string |
undefined |
|
assetPath |
string |
Design System asset path |
|
classes |
string |
undefined |
|
fileType |
string |
'svg' |
|
loading |
'lazy' | ’eager' | 'auto' |
'lazy' |
|
name (required) |
string |
|
|
priority |
boolean |
false |
|
size (required) |
"xs" | "sm" | "md" | "lg" | "xl" | { width: number | string, height: number | string } |
|
Configure an application to add static assets
Add the following configuration to either the project.json or angular.json file for your project:
"assets": [
{
"glob": "**\/*",
"input": "node_modules/@backbase/ui-ang/assets",
"output": "/assets/design-system"
}
]
Global configuration token
The ILLUSTRATION_CONFIG_TOKEN enables you to globally set the default assetPath and fileType for all instances of the illustration component in your project. This can be overridden per instance by setting the corresponding input.
alt
The alt input sets the alt attribute for the illustration image. Set to an empty string "") if the image is decorative and should be ignored by screen readers.
<!-- Illustration with empty alt for decorative use -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }"
alt="">
</bb-illustration-ui>
assetPath
The assetPath input specifies the location of the illustration assets. This can be used to override or theme the illustrations. It can also be set globally using the ILLUSTRATION_CONFIG_TOKEN.
<!-- Illustration with custom asset path -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }"
assetPath="/assets/custom-illustrations">
</bb-illustration-ui>
classes
The classes input adds custom CSS classes to the illustration image for additional styling.
<!-- Illustration with custom CSS class -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }"
classes="my-custom-class">
</bb-illustration-ui>
fileType
The fileType input sets the file type of the illustration (e.g., 'svg', 'png'). The default is 'svg'. This can also be set globally using the ILLUSTRATION_CONFIG_TOKEN.
<!-- Illustration using PNG file type -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }"
fileType="png">
</bb-illustration-ui>
loading
The loading input sets the loading behavior for the image. Accepts 'lazy', 'eager', or 'auto'. Defaults to 'lazy'.
<!-- Illustration with eager loading -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }"
loading="eager">
</bb-illustration-ui>
name
The name input specifies the illustration to display. This corresponds to the file name and is required.
<!-- Illustration with required name -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }">
</bb-illustration-ui>
priority
The priority input indicates whether the image should have high loading priority. Defaults to false.
<!-- Illustration with high priority loading -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 120, height: 120 }"
[priority]="true">
</bb-illustration-ui>
size
The size input sets the width and height of the illustration. Accepts an object with width and height properties. This input is required.
<!-- Illustration with custom size -->
<bb-illustration-ui
[name]="'emptyState'"
[size]="{ width: 200, height: 100 }">
</bb-illustration-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.
- The alt input allows you to provide descriptive alternative text or mark the image as decorative.
- The image uses role="img" for semantic clarity.
- Ensure that the illustration's alt text is meaningful for users relying on assistive technologies, or set it to an empty string if the image is purely decorative.