Import
import { LoadButtonModule } from '@backbase/ui-ang/load-button'
Usage
Use the bb-load-button-ui component to display a button with loading indicator functionality.
<!-- Basic load button usage -->
<bb-load-button-ui [isLoading]="true">Load More</bb-load-button-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
block |
boolean |
false |
|
buttonSize |
'sm' | 'md' |
'md' |
|
circle |
boolean |
false |
|
color |
ButtonColor | string |
'primary' |
|
disabled |
boolean |
false |
|
from |
number |
0 |
|
id |
string |
A unique string |
|
isLoading |
boolean |
false |
|
size |
number |
0 |
|
totalCount |
number |
1 |
|
type |
ButtonType |
'button' |
autofocus
The autofocus input specifies that the button should automatically get focus when the page loads.
<!-- Load button with autofocus -->
<bb-load-button-ui [autofocus]="true">Load More</bb-load-button-ui>
block
The block input makes the button fill the full width of its container.
<!-- Full width load button -->
<bb-load-button-ui [block]="true">Load More</bb-load-button-ui>
buttonSize
The buttonSize input sets the size of the button.
<!-- Small load button -->
<bb-load-button-ui [buttonSize]="'sm'">Load More</bb-load-button-ui>
circle
The circle input renders the button as a circular shape instead of the default oblong shape.
<!-- Circular load button -->
<bb-load-button-ui [circle]="true">+</bb-load-button-ui>
color
The color input sets the button color theme.
<!-- Secondary colored load button -->
<bb-load-button-ui [color]="'secondary'">Load More</bb-load-button-ui>
disabled
The disabled input prevents user interaction with the button.
<!-- Disabled load button -->
<bb-load-button-ui [disabled]="true">Load More</bb-load-button-ui>
from
The from input specifies the starting index for pagination in finite loading scenarios.
<!-- Load button with pagination starting from index 20 -->
<bb-load-button-ui
[from]="20"
[size]="10"
[totalCount]="100">Load More
</bb-load-button-ui>
id
The id input sets a unique identifier for the button element.
<!-- Load button with custom ID -->
<bb-load-button-ui [id]="'my-load-button'">Load More</bb-load-button-ui>
isLoading
The isLoading input shows the loading indicator and hides the button content when set to true.
<!-- Load button in loading state -->
<bb-load-button-ui [isLoading]="true">Load More</bb-load-button-ui>
size
The size input specifies the number of items to load per request in pagination scenarios.
<!-- Load button loading 20 items at a time -->
<bb-load-button-ui
[size]="20"
[from]="0"
[totalCount]="200">Load More
</bb-load-button-ui>
totalCount
The totalCount input sets the total number of available items for finite loading, or 1 for infinite loading.
<!-- Finite loading with 100 total items -->
<bb-load-button-ui
[totalCount]="100"
[size]="10"
[from]="0">Load More
</bb-load-button-ui>
<!-- Infinite loading -->
<bb-load-button-ui [totalCount]="1">Load More</bb-load-button-ui>
type
The type input sets the HTML button type attribute.
<!-- Submit type load button -->
<bb-load-button-ui [type]="'submit'">Submit and Load</bb-load-button-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
paramChange |
EventEmitter<LoadMoreParams> |
Emits new loading parameters when the button is clicked |
<!-- Load button with parameter change handler -->
<bb-load-button-ui (paramChange)="onLoadMore($event)">Load More</bb-load-button-ui>
onLoadMore(params: LoadMoreParams) {
console.log('Loading from index:', params.from);
}
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 Load Button component automatically manages several accessibility features:
- Loading state announcement: When loading, a visually hidden status message announces the state to screen readers.
- Content completion: When all content is loaded, an appropriate status message is announced.
- Proper button semantics: Maintains standard button role and keyboard interaction.
- Focus management: Preserves focus behavior during loading 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 |
|---|---|---|
|
ariaLabel |
Provides accessible label when button content is not descriptive |
string |
<!-- Load button with descriptive aria-label -->
<bb-load-button-ui [ariaLabel]="'Load more products'">+</bb-load-button-ui>