Import
import { EmblemModule } from '@backbase/ui-ang/emblem'
Usage
Use the bb-emblem-ui component to display an an icon with a background or a merchant logo in a standardized format.
<!-- Basic emblem usage with icon -->
<bb-emblem-ui [iconName]="'star'"></bb-emblem-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
appearance |
AppearanceType (`"brand"`, `"neutral"`, `"info"`, `"success"`, `"warning"`, `"danger"`, `"loading"`, `"category-1"` through `"category-10"`) |
brand |
|
iconName |
string |
undefined |
|
merchantLogo |
string |
undefined |
|
size |
EmblemIconSize (`"sm"`, `"md"`, `"lg"`, `"xl"`) |
md |
appearance
The appearance input sets the background color and styling theme for the icon emblem. This input is ignored when displaying a merchant logo.
<!-- Emblem with success appearance -->
<bb-emblem-ui [appearance]="'success'" [iconName]="'check'"></bb-emblem-ui>
iconName
The iconName input specifies the name of the icon to display. This is used when no merchant logo is provided or when a merchant logo fails to load.
<!-- Emblem with custom icon -->
<bb-emblem-ui [iconName]="'home'"></bb-emblem-ui>
merchantLogo
The merchantLogo input specifies the URL of a merchant logo image to display. When provided, this takes precedence over the iconName. If the image fails to load, the component falls back to the iconName or a default domain icon.
<!-- Emblem with merchant logo -->
<bb-emblem-ui [merchantLogo]="'https://example.com/logo.png'" [iconName]="'store'"></bb-emblem-ui>
size
The size input controls the dimensions of the emblem using predefined size tokens from the design system.
<!-- Large emblem -->
<bb-emblem-ui [size]="'lg'" [iconName]="'star'"></bb-emblem-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.
|
Input |
Description |
Type |
|---|---|---|
|
ariaLabel |
Provides an accessible label for the emblem when additional context is needed for screen readers |
string |