Chip

Chips are compact elements that represent an input, an attribute or an action.

Code


                                                        
                                                        
                                                            <PyxisChip
                                                            id="chip-id"
                                                            text="chipText"
                                                            data-testid="chip-dataTestId"
                                                        />

Example of a Chip component

Props

The Chip component supports the following props:

Name	Type	Default	Required
id	string	undefined	true
text	string	undefined	true
dataTestid	string	undefined	true
removeButtonDescription	string	undefined	false
color	'primary'\|'secondary'\|'warning'\|'danger'\|'success'\|'premium'\|'earth'\|'neptune'\|'jupiter'\|'cloudy'\|'system'\|'neutral'\|'brand'	'system'	false
isClickable	boolean	false	false
counter	string \| number	undefined	false

Events

The interactions on the Chip component are handled by the following Events

@remove : This event is emitted when the remove button of the Chip component is clicked

@click : This event is emitted when isClickable prop is true and the Chip component is clicked