Import
import { ModeHeaderModule } from '@backbase/ui-ang/mode-header'
Usage
Use the bb-mode-header-ui component to display a mode header with contextual information and optional close functionality.
<!-- Basic mode header -->
<bb-mode-header-ui [title]="'Transfer money'"></bb-mode-header-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
closeButtonAriaLabel |
string |
undefined |
|
reverseTitleOrder |
boolean |
true |
|
secondaryTitle |
string |
undefined |
|
showCloseButton |
boolean |
true |
|
title |
string |
undefined |
closeButtonAriaLabel
The closeButtonAriaLabel input sets the accessible label for the close button to provide meaningful context for screen reader users.
<!-- Mode header with custom close button aria label -->
<bb-mode-header-ui
[title]="'Settings'"
[closeButtonAriaLabel]="'Close settings panel'">
</bb-mode-header-ui>
reverseTitleOrder
The reverseTitleOrder input controls the display order of the title elements. When true, the secondary title appears below the main title.
<!-- Mode header with normal title order -->
<bb-mode-header-ui
[title]="'John Smith'"
[secondaryTitle]="'Account holder'"
[reverseTitleOrder]="false">
</bb-mode-header-ui>
secondaryTitle
The secondaryTitle input displays a smaller, secondary title below or above the main title depending on the reverseTitleOrder setting.
<!-- Mode header with secondary title -->
<bb-mode-header-ui
[title]="'Transfer money'"
[secondaryTitle]="'To external account'">
</bb-mode-header-ui>
showCloseButton
The showCloseButton input controls the visibility of the close button in the header.
<!-- Mode header without close button -->
<bb-mode-header-ui
[title]="'Account summary'"
[showCloseButton]="false">
</bb-mode-header-ui>
title
The title input sets the main title text displayed in the header.
<!-- Mode header with custom title -->
<bb-mode-header-ui [title]="'Payment confirmation'"></bb-mode-header-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
close |
EventEmitter<void> |
Emitted when the close button is clicked |
Custom content
The mode header component supports content projection through several named slots:
mode-header-icon
Projects content into the icon area of the header.
<!-- Mode header with custom icon -->
<bb-mode-header-ui [title]="'Transfer money'">
<bb-icon-ui name="transfer" mode-header-icon></bb-icon-ui>
</bb-mode-header-ui>
mode-header-status
Projects content into the status area next to the main title.
<!-- Mode header with status indicator -->
<bb-mode-header-ui [title]="'Payment in progress'">
<bb-badge-ui [text]="'Processing'" [color]="'warning'" mode-header-status></bb-badge-ui>
</bb-mode-header-ui>
mode-header-utility-area
Projects content into the utility area on the right side of the header.
<!-- Mode header with utility buttons -->
<bb-mode-header-ui [title]="'Account details'">
<button bbButton [color]="'secondary'" mode-header-utility-area>
Edit
</button>
<button bbButton [color]="'primary'" mode-header-utility-area>
Save
</button>
</bb-mode-header-ui>
Complete example
<!-- Comprehensive mode header example -->
<bb-mode-header-ui
[title]="'Transfer confirmation'"
[secondaryTitle]="'Review and confirm your transfer'"
[closeButtonAriaLabel]="'Close transfer dialog'"
(close)="onCloseTransfer()">
<bb-icon-ui name="transfer" mode-header-icon></bb-icon-ui>
<bb-badge-ui
[text]="'Secure'"
[color]="'success'"
mode-header-status>
</bb-badge-ui>
<button bbButton
[color]="'secondary'"
mode-header-utility-area>
Back
</button>
<button bbButton
[color]="'primary'"
mode-header-utility-area>
Confirm
</button>
</bb-mode-header-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 mode header includes several accessibility features:
- The main title uses semantic heading markup <h2>) for proper document structure
- The close button includes appropriate ARIA labeling through the closeButtonAriaLabel input
- Focus management ensures keyboard users can navigate through interactive elements
- All interactive elements have appropriate roles and states
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 |
Provides accessible label for the close button |
string |