> 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

Chips are small, interactive components used to display information, filter content, or trigger actions.

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2Fj9tOJxZBIMpGjrw8KIzk%2FChips%20-%20Overview.png?alt=media&amp;token=0617a004-3f06-4c5f-a015-5023d87e696d" 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="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F5Rn8Mlh5hervob1gXGEZ%2FChips%20-%20Anatomy.png?alt=media&amp;token=aa1e2968-e11e-4c23-bfc7-4f8a44a1a1b6" 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. |