# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.