Import
import { BadgeCounterModule } from '@backbase/ui-ang/badge-counter'
Usage
Use the bb-badge-counter-ui component to display a badge counter. The count input is required to show a value.
<!-- Basic badge counter usage with count -->
<bb-badge-counter-ui [count]="18"></bb-badge-counter-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
color |
string |
'primary' |
|
count (required) |
number |
0 |
|
maxCount |
number |
999 |
color
The color input sets the background color of the badge counter. Accepts semantic color values such as 'primary', 'secondary', 'info', 'success', 'warning', 'danger', or a custom class.
<!-- Badge counter with success color -->
<bb-badge-counter-ui
[color]="'success'"
[count]="8">
</bb-badge-counter-ui>
count
The count input sets the numeric value to display in the badge counter. If set to 0, the badge is hidden.
<!-- Badge counter with count set to 12 -->
<bb-badge-counter-ui [count]="12"></bb-badge-counter-ui>
maxCount
The maxCount input sets the maximum value to display. If the count exceeds this value, the badge will show the max value followed by a plus sign (e.g., ’99+').
<!-- Badge counter with maxCount set to 99 -->
<bb-badge-counter-ui [count]="120" [maxCount]="99"></bb-badge-counter-ui>