Chips are compact elements that represent input, attribute, or action. They are typically used to display tags, categories, or selections. Unlike badges which are for status display, chips are interactive elements that can be selected, removed, or used to filter content. The chip component supports removable, selectable, and disabled states for flexible user interactions.
✅ Use chips when:
- Users need to make multiple selections from a set of options
- Filtering or categorizing content (e.g., product filters, tags)
- Displaying selected items that can be removed
- Creating tags or labels that users can interact with
- Building a chip group for multi-select scenarios
❌ Don't use chips for:
- Static status indicators (use badges instead)
- Primary navigation (use buttons or links)
- Display-only information (use labels or text)
- Large amounts of text (chips should be compact)
Basic chip with default styling:
Chips come in two sizes: small (default) and large. Choose based on your design hierarchy:
Chips can be removed by clicking the close button or pressing Delete/Backspace. A dds-remove event is fired when the chip is removed.
Make chips selectable to create toggleable options. Users can click to select/deselect. A dds-select event is fired when the chip is selected.
Chips can be disabled to prevent interaction:
Chips support custom content through slots:
Use chips to create filterable interfaces:
Display and manage selected items:
Use chips to manage tags or labels:
The chip component supports extensive customization beyond the default styling. This section demonstrates practical styling techniques and advanced customization patterns.
For simple customizations, use CSS custom properties directly on the component:
import { DapDSChip } from 'dap-design-system'
import { DapDSChipReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSChip } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
removeable | boolean | false | Whether the chip is removeable |
selectable | boolean | false | Whether the chip is selectable |
selected | boolean | false | Whether the chip is selected |
disabled | boolean | false | Whether the chip is disabled |
value | string, undefined | The value of the chip | |
deleteAriaLabel | string, undefined | The aria label for the delete button | |
size | 'sm', 'lg' | The size of the chip. Default is sm. | |
sizeMap | string | Responsive size map (e.g. "md:lg"). |
No slots available.
| Event Name | Description | Type |
|---|---|---|
dds-remove | Fired when the chip is removed | {value: string } |
dds-select | Fired when the chip is selected | {value?: string, selected: boolean } |
| Part Name | Description |
|---|---|
base | The base part |
content-container | The container for the content |
remove-button | The remove button |
remove-icon | The icon of the remove icon |
remove-icon-base | The base of the remove icon |
remove-icon-base-base | The base of the remove icon base |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-chip::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-chip::part(base),
.my-custom-dap-ds-chip::part(content-container) {
/* Shared styles */
}
Example usage:
<dap-ds-chip class="my-custom-dap-ds-chip">
Chip
</dap-ds-chip>
.my-custom-dap-ds-chip::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-chip-border | Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) |
--dds-chip-border-radius | Border radius of the chip (default: var(--dds-radius-small)) |
--dds-chip-font-weight | Font weight of the chip (default: var(--dds-font-weight-bold)) |
--dds-chip-line-height | Line height of the chip (default: 1.5) |
--dds-chip-transition | Transition timing for chip interactions (default: all 0.2s ease-in-out) |
--dds-chip-padding-sm | Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) |
--dds-chip-padding-lg | Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) |
--dds-chip-font-size-sm | Font size for small chip size (default: var(--dds-font-xs)) |
--dds-chip-font-size-lg | Font size for large chip size (default: var(--dds-font-xs)) |
--dds-chip-background-color | Background color of the chip (default: var(--dds-background-neutral-base)) |
--dds-chip-text-color | Text color of the chip (default: var(--dds-text-neutral-base)) |
--dds-chip-hover-background-color | Background color of the chip on hover (default: var(--dds-background-neutral-medium)) |
--dds-chip-active-background-color | Background color of the chip when active (default: var(--dds-background-neutral-strong)) |
--dds-chip-selected-background-color | Background color of the selected chip (default: var(--dds-background-brand-medium)) |
--dds-chip-selected-text-color | Text color of the selected chip (default: var(--dds-text-brand-subtle)) |
--dds-chip-selected-border-color | Border color of the selected chip (default: var(--dds-border-brand-base)) |
--dds-chip-disabled-background-color | Background color of the disabled chip (default: var(--dds-background-neutral-medium)) |
--dds-chip-disabled-text-color | Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-chip
style="--dds-chip-border: value; --dds-chip-border-radius: value;">
Chip
</dap-ds-chip>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-chip {
--dds-chip-border: value;
--dds-chip-border-radius: value;
--dds-chip-font-weight: value;
}
<dap-ds-chip class="my-custom-dap-ds-chip">
Chip
</dap-ds-chip>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-chip {
--dds-chip-border: value;
--dds-chip-border-radius: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
