Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.

Component Guide

import { Chip } from '@uhg-abyss/web/ui/Chip';

onClose

Use the onClose function to handle the action when the close button is triggered.

leftAddOn

Use the leftAddOn prop to add a custom element before the text, such as an IconSymbol.

maxWidth

Chips have a max width of fit-content by default. Use the optional maxWidth prop to pass a number or a string to set a max width. Exceeding the max width will truncate the content on the chip and will be fully visualized with a Tooltip on hover.

Group

Use Chip.Group to group multiple chips together. Use title to give the group of chips a label. title is required.

Chip Props

Name	Type	Default	Required	Description
ariaCloseLabel	string	'close'	-	The text to describe the action of the close button
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
leftAddOn	React.ReactNode	-	-	The left add-on element to be placed before the text, such as an icon
maxWidth	string | number	'fit-content'	-	The maxWidth of the chip
text	string	-	-	The text to be input into the chip component

Below are the link(s) to the relevant GitHub type files:

Chip.types.ts

Chip.Group Props

Name	Type	Default	Required	Description
children	React.ReactNode	-	-	The content of the group - usually the chips and their formatting
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
title	string	-		The label given to the group of chips

Chip Classes

Class Name	Description
.abyss-chip-root	Chip root element
.abyss-chip-text	Chip text element
.abyss-chip-close-button	Chip close button element
.abyss-chip-add-on	Chip left add-on element
.abyss-chip-close-button-icon	Chip close button icon element
.abyss-chip-tooltip	Chip tooltip element

Chip.Group Classes

Class Name	Description
.abyss-chip-group	Chip group root element

Chips are focusable and truncated with an ellipsis (if a maxWidth is defined). Once a chip has been removed, it cannot be re-rendered. These are primarily used for Select List Multi and Data Table filter.

Setting focus onClose

When implementing onClose, the keyboard focus that was on the close button will be lost. As part of implementing onClose, update focus (setFocus) needs to be set to a logical place. This may vary depending on use. In general, keep focus in chip groups unless there are none.

Unless provided clear design guidance, set focus onClose in this order:

• Previous Chip (if there is one)
• Next Chip (if there is one)
• Previous focusable element

Keyboard Interactions

Key	Description
Space	Activates the chip's popover or close button
Enter	Activates the chip's popover or close button
Backspace	Activates the chip's popover or close button
Delete	Activates the chip's popover or close button

Component Tokens

Note: Click on the token row to copy the token to your clipboard.

Search tokens

Chip Tokens

Token Name	Value
chip.color.icon.active	#000000
chip.color.icon.hover	#323334
chip.color.icon.rest	#4B4D4F
chip.color.surface.container	#F3F3F3
chip.color.text.label	#323334
chip.border-radius.all.container	500px
chip.sizing.all.icon	16px
chip.spacing.gap.horizontal.container	4px
chip.spacing.padding.horizontal.container	8px
chip.spacing.padding.vertical.container	4px