Chip

Compact element for labels, tags, or selections.

Interactive preview configurations are being developed for this component.

Props

content
string
Use the Filter Chip component instead. The text content displayed in the chip.
deletable
boolean
Use the Filter Chip component instead. When true, shows a delete icon and makes chip clickable.
error
boolean
Use the Filter Chip component instead. Shows an error state on the chip.
iconTheme
GoabChipTheme
Use the Filter Chip component instead. The icon theme - outline or filled.
leadingIcon
string
Use the Filter Chip component instead. Icon displayed at the start of the chip.
testId
string
Use the Filter Chip component instead. Sets a data-testid attribute for automated testing.
variant
GoabChipVariant
Use the Filter Chip component instead. The chip variant style.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
content
string
Use the Filter Chip component instead. The text content displayed in the chip.
deletable
boolean
Use the Filter Chip component instead. When true, shows a delete icon and makes chip clickable.
error
boolean
Use the Filter Chip component instead. Shows an error state on the chip.
iconTheme
GoabChipTheme
Use the Filter Chip component instead. The icon theme - outline or filled.
leadingIcon
GoabIconType | null
Use the Filter Chip component instead. Icon displayed at the start of the chip.
testId
string
Sets the data-testid attribute for automated testing.
variant
GoabChipVariant
Use the Filter Chip component instead. The chip variant style.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
content
string
Use the Filter Chip component instead. The text content displayed in the chip.
deletable
boolean
Use the Filter Chip component instead. When true, shows a delete icon and makes chip clickable.
Defaults to false.
error
boolean
Use the Filter Chip component instead. Shows an error state on the chip.
Defaults to false.
icontheme
IconTheme
Use the Filter Chip component instead. The icon theme - outline or filled.
Defaults to outline.
leadingIcon
GoabIconType
Use the Filter Chip component instead. Icon displayed at the start of the chip.
testId
string
Use the Filter Chip component instead. Sets a data-testid attribute for automated testing.
variant
"filter"
Use the Filter Chip component instead. The chip variant style.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.

Events

onClick
() => void
Callback fired when the chip is clicked or deleted.
onClick
CustomEvent
Emits when the chip is clicked.
_click
CustomEvent
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs