> For the complete documentation index, see [llms.txt](https://designsystem.dubai.ae/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://designsystem.dubai.ae/components/chips.md).

# Chips

## Overview

<figure><img src="/files/3BCDYae4hdYbsX9cdc3j" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Chips are used to represent information, filter options, or initiate actions in a compact format. They are suitable for displaying tags, categories, contacts, and other small content items. Chips can be used individually or in groups, offering an efficient way to show content or actions in limited space.

### How it works

A chip typically includes a label and may feature optional elements like icons or buttons for additional actions. Chips can be interactive, allowing users to click or tap them to trigger actions (e.g., filtering content or selecting options), or static, simply displaying information without interaction.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-chip
    chip_text="Label"
    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
</dda-chip>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaChip 
    chip_text="Label"
    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
</DdaChip>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaChip 
    chip_text="Label"
    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
</DdaChip>
```

{% endtab %}

{% tab title="Angular" %}

<pre class="language-jsx"><code class="lang-jsx">&#x3C;dda-chip 
<strong>    chip_text="Label"
</strong>    bg_color="grey"
    chip_icon="sentiment_satisfied"
    chip_icon_size="md"
    chip_icon_family="material-icons material-symbols-outlined"
    show_close_icon="true"
    rounded="circle"
    custom_class=""
    component_mode=""
    onclick="console.log('clicked')"
>
&#x3C;/dda-chip>
</code></pre>

{% endtab %}
{% endtabs %}

### Properties

| Property           | Description                                                                                                                | Type                          |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `bg_color`         | Specifies the background color of the chip. It can be predefined colors such as `'success'`, `'danger'`, `'warning'`, etc. | `string`                      |
| `clickHandler`     | A callback function triggered when the close icon is clicked. Accepts a `MouseEvent` parameter.                            | `(event: MouseEvent) => void` |
| `component_mode`   | Enables different modes for the component, potentially changing its appearance or behavior.                                | `string`                      |
| `custom_class`     | Allows users to pass additional CSS classes for custom styling.                                                            | `string`                      |
| `icon`             | The name of a Material Icon to be displayed at the beginning of the chip.                                                  | `string`                      |
| `rounded`          | Defines the roundness of the chip's edges. Accepts values like `'sm'`, `'circle'` for different border-radius levels.      | `string`                      |
| `show_close_icon`  | Determines whether a close (✕) icon should appear inside the chip, allowing users to remove it.                            | `boolean`                     |
| `size`             | Defines the size of the chip. Expected values are `'sm'`, `'md'`, or `'lg'`.                                               | `string`                      |
| `Chip Icon Family` | Define the icon font family                                                                                                | `string`                      |
| `Chip icon Text`   | Define the icon text                                                                                                       | `string`                      |

## Anatomy

<figure><img src="/files/mVdEebtdnJf9Bv2vedca" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Lead Icon**: Positioned on the left side of the chip, the lead icon provides a visual representation related to the chip’s content or purpose, helping users quickly identify the context.

**Label**: The main text of the chip, indicating its content or purpose. It provides a brief, clear description to make the chip's function easily understandable.

**Trail Icon**: Positioned on the right side of the chip, the trail icon allows users to interact with the chip.

## Dos and Don'ts

| Use chips to represent information, filter options, or trigger actions. | Don't use chips for large blocks of text or complex interactions.    |
| ----------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Label chips clearly to indicate their purpose.                          | Avoid using ambiguous or unclear labels for chips.                   |
| Ensure chips are large enough to be easily tappable or clickable.       | Don't make chips too small to interact with comfortably.             |
| Use consistent styling and spacing across all chips in the application. | Don't use inconsistent styles that may confuse users.                |
| Include icons or buttons in chips when additional actions are needed.   | Don't overcrowd chips with too many elements.                        |
| Provide clear visual feedback when chips are interacted with.           | Don't leave users guessing whether their interaction was successful. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://designsystem.dubai.ae/components/chips.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.