Chip Overview

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.

When to Use

✅ 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)
Examples Default chip

Basic chip with default styling:

<dap-ds-chip>Default Chip</dap-ds-chip>
Chip sizes

Chips come in two sizes: small (default) and large. Choose based on your design hierarchy:

<dap-ds-stack direction="row" align="center">
<dap-ds-chip size="sm">Small Chip</dap-ds-chip>
<dap-ds-chip size="lg">Large Chip</dap-ds-chip>
</dap-ds-stack>
Removable chips

Chips can be removed by clicking the close button or pressing Delete/Backspace. A dds-remove event is fired when the chip is removed.

<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-200)'}}>
    Click the X button or press Delete/Backspace to remove
  </dap-ds-typography>
  <dap-ds-stack direction="row" wrap>
    <dap-ds-chip removeable>Action Movies</dap-ds-chip>
    <dap-ds-chip removeable>Comedy</dap-ds-chip>
    <dap-ds-chip removeable>Horror</dap-ds-chip>
    <dap-ds-chip removeable>Sci-Fi</dap-ds-chip>
  </dap-ds-stack>
</div>
</dap-ds-stack>
Selectable chips

Make chips selectable to create toggleable options. Users can click to select/deselect. A dds-select event is fired when the chip is selected.

<dap-ds-stack direction="column">
<dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-200)'}}>
  Click chips to select or deselect them
</dap-ds-typography>
<dap-ds-stack id="selectable-chips" direction="row">
  <dap-ds-chip selectable>All</dap-ds-chip>
  <dap-ds-chip selectable>Music</dap-ds-chip>
  <dap-ds-chip selectable>Videos</dap-ds-chip>
  <dap-ds-chip selectable>Photos</dap-ds-chip>
  <dap-ds-chip selectable>Documents</dap-ds-chip>
</dap-ds-stack>
</dap-ds-stack>
Disabled chips

Chips can be disabled to prevent interaction:

<dap-ds-stack direction="row">
<dap-ds-chip disabled>Disabled Chip</dap-ds-chip>
<dap-ds-chip removeable disabled>Disabled Removable</dap-ds-chip>
<dap-ds-chip selectable disabled>Disabled Selectable</dap-ds-chip>
<dap-ds-chip selectable selected disabled>Disabled Selected</dap-ds-chip>
</dap-ds-stack>
Chips with icons and content

Chips support custom content through slots:

<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">With icons</dap-ds-typography>
  <dap-ds-stack direction="row" wrap>
    <dap-ds-chip removeable>
      <dap-ds-icon name="calendar-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
      Events
    </dap-ds-chip>
    <dap-ds-chip removeable>
      <dap-ds-icon name="user-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
      Participants
    </dap-ds-chip>
    <dap-ds-chip removeable>
      <dap-ds-icon name="time-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
      Schedule
    </dap-ds-chip>
  </dap-ds-stack>
</div>
</dap-ds-stack>
Real-World Patterns Filter chips

Use chips to create filterable interfaces:

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">Product Filters</dap-ds-typography>
  <dap-ds-typography variant="body" style={{color: 'var(--dds-text-neutral-subtle)', marginBottom: 'var(--dds-spacing-400)'}}>
    Select filters to narrow down your search
  </dap-ds-typography>
  
  <div>
    <dap-ds-typography variant="body" bold style={{marginBottom: 'var(--dds-spacing-200)'}}>Active Filters</dap-ds-typography>
    <dap-ds-stack direction="row" wrap>
      <dap-ds-chip removeable size="sm">Category: Electronics</dap-ds-chip>
      <dap-ds-chip removeable size="sm">Price: $100 - $500</dap-ds-chip>
      <dap-ds-chip removeable size="sm">In Stock</dap-ds-chip>
      <dap-ds-chip removeable size="sm">Free Shipping</dap-ds-chip>
    </dap-ds-stack>
  </div>
  
  <div>
    <dap-ds-typography variant="body" bold style={{marginBottom: 'var(--dds-spacing-200)'}}>Available Filters</dap-ds-typography>
    <dap-ds-stack direction="row" wrap>
      <dap-ds-chip selectable>Computers</dap-ds-chip>
      <dap-ds-chip selectable>Phones</dap-ds-chip>
      <dap-ds-chip selectable>Tablets</dap-ds-chip>
      <dap-ds-chip selectable>Accessories</dap-ds-chip>
      <dap-ds-chip selectable selected>Warranty Included</dap-ds-chip>
    </dap-ds-stack>
  </div>
</dap-ds-stack>
</div>
Selected items display

Display and manage selected items:

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">Selected Skills</dap-ds-typography>
  <dap-ds-typography variant="body" style={{color: 'var(--dds-text-neutral-subtle)', marginBottom: 'var(--dds-spacing-400)'}}>
    Your selected skills (3 total)
  </dap-ds-typography>
  
  <dap-ds-stack direction="row" wrap>
    <dap-ds-chip removeable>
      <dap-ds-icon slot="icon" name="code-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
      JavaScript
    </dap-ds-chip>
    <dap-ds-chip removeable>
      <dap-ds-icon slot="icon" name="code-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
      TypeScript
    </dap-ds-chip>
    <dap-ds-chip removeable>
      <dap-ds-icon slot="icon" name="code-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
      React
    </dap-ds-chip>
  </dap-ds-stack>
  
  <div style={{marginTop: 'var(--dds-spacing-400)'}}>
    <dap-ds-typography variant="body" style={{marginBottom: 'var(--dds-spacing-200)', color: 'var(--dds-text-neutral-subtle)'}}>
      Add more skills:
    </dap-ds-typography>
    <dap-ds-stack direction="row" wrap>
      <dap-ds-chip selectable>Vue.js</dap-ds-chip>
      <dap-ds-chip selectable>Angular</dap-ds-chip>
      <dap-ds-chip selectable>Node.js</dap-ds-chip>
      <dap-ds-chip selectable disabled>Python</dap-ds-chip>
    </dap-ds-stack>
  </div>
</dap-ds-stack>
</div>
Tag management

Use chips to manage tags or labels:

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">Document Tags</dap-ds-typography>
  
  <dap-ds-stack direction="row" justify="space-between" align="center">
    <dap-ds-typography variant="body" bold>Project Proposal.pdf</dap-ds-typography>
    <dap-ds-stack direction="row" wrap>
      <dap-ds-chip removeable size="sm">
        <dap-ds-icon slot="icon" name="file-text-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
        Official
      </dap-ds-chip>
      <dap-ds-chip removeable size="sm">
        <dap-ds-icon slot="icon" name="lock-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
        Confidential
      </dap-ds-chip>
      <dap-ds-chip removeable size="sm">
        <dap-ds-icon slot="icon" name="flag-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
        Priority
      </dap-ds-chip>
    </dap-ds-stack>
  </dap-ds-stack>
  
  <dap-ds-divider></dap-ds-divider>
  
  <dap-ds-stack direction="row" justify="space-between" align="center">
    <dap-ds-typography variant="body" bold>Budget Report.xlsx</dap-ds-typography>
    <dap-ds-stack direction="row" wrap>
      <dap-ds-chip removeable size="sm">
        <dap-ds-icon slot="icon" name="folder-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
        Finance
      </dap-ds-chip>
      <dap-ds-chip removeable size="sm">
        <dap-ds-icon slot="icon" name="calendar-line" style={{marginRight: 'var(--dds-spacing-100)'}}></dap-ds-icon>
        Q4 2024
      </dap-ds-chip>
    </dap-ds-stack>
  </dap-ds-stack>
</dap-ds-stack>
</div>
Custom Styling

The chip component supports extensive customization beyond the default styling. This section demonstrates practical styling techniques and advanced customization patterns.

Quick Customization with CSS Custom Properties

For simple customizations, use CSS custom properties directly on the component:

<dap-ds-stack direction="row">
<dap-ds-chip 
  style={{
    '--dds-chip-background-color': 'var(--dds-violet-200)',
    '--dds-chip-text-color': 'var(--dds-violet-900)',
    '--dds-chip-border-color': 'var(--dds-violet-600)',
    '--dds-chip-border-width': 'var(--dds-border-width-thick)',
  }}>
  Custom Colors
</dap-ds-chip>
<dap-ds-chip 
  style={{
    '--dds-chip-border-radius': 'var(--dds-radius-rounded)',
    '--dds-chip-font-weight': 'var(--dds-font-weight-black)',
  }}>
  Rounded
</dap-ds-chip>
<dap-ds-chip 
  removeable
  style={{
    '--dds-chip-transition': 'all 0.3s ease',
    '--dds-chip-padding-sm': 'var(--dds-spacing-200) var(--dds-spacing-400)',
  }}>
  Extended Padding
</dap-ds-chip>
</dap-ds-stack>
Importing 
import { DapDSChip } from 'dap-design-system'
Importing React 
import { DapDSChipReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSChip } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
size'sm', 'lg''sm'The size of the badge
removeablebooleanfalseWhether the chip is removeable
selectablebooleanfalseWhether the chip is selectable
selectedbooleanfalseWhether the chip is selected
disabledbooleanfalseWhether the chip is disabled
valuestring, undefinedThe value of the chip
deleteAriaLabelstring, undefinedThe aria label for the delete button
Slots

No slots available.

Events
Event NameDescriptionType
dds-removeFired when the chip is removed{value: string }
dds-selectFired when the chip is selected{value?: string, selected: boolean }
CSS Parts
Part NameDescription
baseThe base part
content-containerThe container for the content
remove-buttonThe remove button
How to Use CSS Parts

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.

 CSS Custom Properties
Property NameDescription
--dds-chip-border-widthBorder width of the chip
--dds-chip-border-styleBorder style of the chip
--dds-chip-border-radiusBorder radius of the chip
--dds-chip-font-weightFont weight of the chip
--dds-chip-line-heightLine height of the chip
--dds-chip-transitionTransition timing for chip interactions
--dds-chip-padding-smPadding for small chip size
--dds-chip-padding-lgPadding for large chip size
--dds-chip-font-size-smFont size for small chip size
--dds-chip-font-size-lgFont size for large chip size
--dds-chip-background-colorBackground color of the chip
--dds-chip-text-colorText color of the chip
--dds-chip-hover-background-colorBackground color of the chip on hover
--dds-chip-active-background-colorBackground color of the chip when active
--dds-chip-selected-background-colorBackground color of the selected chip
--dds-chip-selected-text-colorText color of the selected chip
--dds-chip-selected-border-colorBorder color of the selected chip
--dds-chip-disabled-background-colorBackground color of the disabled chip
--dds-chip-disabled-text-colorText color of the disabled chip
How to Use CSS Custom Properties

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-width: value; --dds-chip-border-style: value;">
  Chip
</dap-ds-chip>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-chip {
  --dds-chip-border-width: value;
  --dds-chip-border-style: value;
  --dds-chip-border-radius: 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-width: value;
  --dds-chip-border-style: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.