Import
import { ChipModule } from '@backbase/ui-ang/chip'
Usage
Use the bb-chip-ui component to display a chip with a label. Set dismissible to true to show a close button and handle the close output to react to dismiss actions.
<!-- Basic chip usage -->
<bb-chip-ui [label]="'In progress'"></bb-chip-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
dismissible |
boolean |
false |
|
label (required) |
string |
|
dismissible
The dismissible input determines whether a close button is displayed on the chip. When set to true, a dismiss button appears, allowing users to remove the chip. Defaults to false.
<!-- Dismissible chip with close event -->
<bb-chip-ui
[label]="'In progress'"
[dismissible]="true"
(close)="onClose()">
</bb-chip-ui>
label
The label input sets the text displayed inside the chip. This input is required.
<!-- Chip with custom label -->
<bb-chip-ui [label]="'Completed'"></bb-chip-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
close |
EventEmitter<void> |
Emitted when the dismiss button is clicked |
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 dismiss button includes an ARIA label describing the action, e.g., "Dismiss In progress chip".
- The close icon is marked as aria-hidden="true" to be ignored by assistive technologies.