Import
import { BadgeModule } from '@backbase/ui-ang/badge'
Usage
Use the bb-badge-ui component to display a badge. The text input is required.
<bb-badge-ui [text]="Badge"></bb-badge-ui>
Inputs
|
Prop |
Type |
Default |
|---|---|---|
|
abbr |
string | boolean |
false |
|
breakWord |
boolean |
false |
|
circle |
boolean |
false |
|
color |
“primary" | "info" | "success" | "warning" | "danger" | "secondary" or custom class |
“primary" |
|
text (required) |
string |
|
|
wrap |
boolean |
false |
abbr
The abbr input sets the abbreviation to show when using abbreviated styling. When set to true, it displays the first character of the text. When set to a string, it displays that custom abbreviation.
<!-- Badge showing first character as abbreviation -->
<bb-badge-ui
[abbr]="true"
[text]="'Administrator'">
</bb-badge-ui>
<!-- Badge with custom abbreviation -->
<bb-badge-ui
[text]="'Administrator'"
[abbr]="'Admin'">
</bb-badge-ui>
breakWord
The breakWord input applies a text break class, allowing the badge text to wrap within the parent box width.
<!-- Badge with text that breaks to fit parent width -->
<bb-badge-ui
[text]="'Very long badge text that needs to wrap'"
[breakWord]="true">
</bb-badge-ui>
circle
The circle input applies circular styling to the badge. Typically used with the abbr input for displaying initials or single characters.
<!-- Circular badge showing initials -->
<bb-badge-ui
[circle]="true"
[text]="'John Smith'"
[abbr]="true">
</bb-badge-ui>
color
The color input sets the background color of the badge from the available semantic and hierarchical variants.
<!-- Badge using success color -->
<bb-badge-ui
[color]="'success'"
[text]="Approved">
</bb-badge-ui>
To apply a custom color, set the color input to a custom string value:
- The value must follow the naming convention: badge-yourCustomColor.
- This string will be applied as a CSS class on the badge element.
- You are responsible for defining the corresponding CSS class in your styles.
<!-- Badge using a custom color -->
<bb-badge-ui
[text]="Custom"
[color]="'badge-mySpecialBlue'">
</bb-badge-ui>
text
The text input sets the text to display in the badge. This input is required and will throw an error if not provided.
<!-- Badge with custom text -->
<bb-badge-ui [text]="'New feature'"></bb-badge-ui>
wrap
The wrap input enables text wrap styling, allowing the badge text to wrap to multiple lines if needed.
<!-- Badge with text wrapping enabled -->
<bb-badge-ui
[text]="'Long badge text content that may wrap'"
[wrap]="true">
</bb-badge-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
This input supports WAI-ARIA compliance and is intended to improve accessibility for users relying on assistive technologies. Use it to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaLabel |
Sets the accessible label when the badge does not need to render a label tag. Used in combination with the abbr input to provide additional context. |
string |