> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/10.chip.md).

# Chip

### Chip Props

| Name                         | Type    | Default                                                                         | Description                                                    |
| ---------------------------- | ------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| colors                       | object  |                                                                                 | Object with Tailwind CSS colors classes                        |
| colors.fillBgIos             | string  | 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'                       |                                                                |
| colors.fillBgMaterial        | string  | 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'           |                                                                |
| colors.fillTextIos           | string  | 'text-current'                                                                  |                                                                |
| colors.fillTextMaterial      | string  | 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' |                                                                |
| colors.outlineBorderIos      | string  | 'border-black border-opacity-20 dark:border-white dark:border-opacity-20'       |                                                                |
| colors.outlineBorderMaterial | string  | 'border-md-light-outline dark:border-md-dark-outline'                           |                                                                |
| colors.outlineTextIos        | string  | 'text-current'                                                                  |                                                                |
| colors.outlineTextMaterial   | string  | 'text-md-light-on-surface dark:text-md-dark-on-surface'                         |                                                                |
| component                    | string  | 'div'                                                                           | Component's HTML Element                                       |
| deleteButton                 | boolean | false                                                                           | Defines whether the Chip has additional "delete" button or not |
| outline                      | boolean | false                                                                           | Makes chip outline                                             |

### Chip Events

| Name   | Type        | Description                                         |
| ------ | ----------- | --------------------------------------------------- |
| delete | function(e) | Event will be triggered on Chip delete button click |

### Chip Slots

| Name  | Description                                |
| ----- | ------------------------------------------ |
| media | Content of the chip media area (e.g. icon) |

### Examples

{% tabs %}
{% tab title="Vue" %}
{% code title="Vue" lineNumbers="true" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Chips" />

    <i-block-title>Chips With Text</i-block-title>
    <i-block strong-ios outline-ios>
      <i-chip class="m-0.5">Example Chip</i-chip>
      <i-chip class="m-0.5">Another Chip</i-chip>
      <i-chip class="m-0.5">One More Chip</i-chip>
      <i-chip class="m-0.5">Fourth Chip</i-chip>
      <i-chip class="m-0.5">Last One</i-chip>
    </i-block>

    <i-block-title>Outline Chips</i-block-title>
    <i-block strong-ios outline-ios>
      <i-chip outline class="m-0.5"> Example Chip </i-chip>
      <i-chip outline class="m-0.5"> Another Chip </i-chip>
      <i-chip outline class="m-0.5"> One More Chip </i-chip>
      <i-chip outline class="m-0.5"> Fourth Chip </i-chip>
      <i-chip outline class="m-0.5"> Last One </i-chip>
    </i-block>

    <i-block-title>Contact Chips</i-block-title>
    <i-block strong-ios outline-ios>
      <i-chip class="m-0.5">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
          />
        </template>
        Jane Doe
      </i-chip>
      <i-chip class="m-0.5">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
          />
        </template>
        John Doe
      </i-chip>
      <i-chip class="m-0.5">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
          />
        </template>
        Adam Smith
      </i-chip>
    </i-block>

    <i-block-title>Deletable Chips / Tags</i-block-title>
    <i-block strong-ios outline-ios>
      <i-chip class="m-0.5" delete-button @delete="onDelete">
        Example Chip
      </i-chip>
      <i-chip class="m-0.5" delete-button @delete="onDelete">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
          />
        </template>
        Adam Smith
      </i-chip>
    </i-block>
    <i-block-title class="bg-b bg-b">Color Chips</i-block-title>
    <i-block strong-ios outline-ios>
      <i-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-red-500', fillText: 'text-white' }"
      >
        Red Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-green-500', fillText: 'text-white' }"
      >
        Green Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-blue-500', fillText: 'text-white' }"
      >
        Blue Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-yellow-500', fillText: 'text-white' }"
      >
        Yellow Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-pink-500', fillText: 'text-white' }"
      >
        Pink Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-red-500',
          outlineText: 'text-red-500',
        }"
      >
        Red Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-green-500',
          outlineText: 'text-green-500',
        }"
      >
        Green Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-blue-500',
          outlineText: 'text-blue-500',
        }"
      >
        Blue Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-yellow-500',
          outlineText: 'text-yellow-500',
        }"
      >
        Yellow Chip
      </i-chip>
      <i-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-pink-500',
          outlineText: 'text-pink-500',
        }"
      >
        Pink Chip
      </i-chip>
    </i-block>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iChip,
    iBlock,
    iBlockTitle,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iChip,
      iBlock,
      iBlockTitle,
    },
    setup() {
      const onDelete = () => {
        console.log('Delete Chip');
      };
      return {
        onDelete,
      };
    },
  };
</script>
```

{% endcode %}
{% endtab %}

{% tab title="React" %}
{% code title="React" lineNumbers="true" %}

```js
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Chip,
  Block,
  BlockTitle,
} from 'ina-ui/react';

export default function ChipsPage() {
  return (
    <Page>
      <Navbar
        title="Chips"
        />

      <BlockTitle>Chips With Text</BlockTitle>
      <Block strongIos outlineIos>
        <Chip className="m-0.5">Example Chip</Chip>
        <Chip className="m-0.5">Another Chip</Chip>
        <Chip className="m-0.5">One More Chip</Chip>
        <Chip className="m-0.5">Fourth Chip</Chip>
        <Chip className="m-0.5">Last One</Chip>
      </Block>

      <BlockTitle>Outline Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip outline className="m-0.5">
          Example Chip
        </Chip>
        <Chip outline className="m-0.5">
          Another Chip
        </Chip>
        <Chip outline className="m-0.5">
          One More Chip
        </Chip>
        <Chip outline className="m-0.5">
          Fourth Chip
        </Chip>
        <Chip outline className="m-0.5">
          Last One
        </Chip>
      </Block>

      <BlockTitle>Contact Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip
          className="m-0.5"
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
            />
          }
        >
          Jane Doe
        </Chip>
        <Chip
          className="m-0.5"
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
            />
          }
        >
          John Doe
        </Chip>
        <Chip
          className="m-0.5"
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
            />
          }
        >
          Adam Smith
        </Chip>
      </Block>

      <BlockTitle>Deletable Chips / Tags</BlockTitle>
      <Block strongIos outlineIos>
        <Chip
          className="m-0.5"
          deleteButton
          onDelete={() => console.log('Delete Chip')}
        >
          Example Chip
        </Chip>
        <Chip
          className="m-0.5"
          deleteButton
          onDelete={() => console.log('Delete Chip')}
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
            />
          }
        >
          Adam Smith
        </Chip>
      </Block>
      <BlockTitle>Color Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-red-500', fillText: 'text-white' }}
        >
          Red Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-green-500', fillText: 'text-white' }}
        >
          Green Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-blue-500', fillText: 'text-white' }}
        >
          Blue Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-yellow-500', fillText: 'text-white' }}
        >
          Yellow Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-pink-500', fillText: 'text-white' }}
        >
          Pink Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-red-500',
            outlineText: 'text-red-500',
          }}
        >
          Red Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-green-500',
            outlineText: 'text-green-500',
          }}
        >
          Green Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-blue-500',
            outlineText: 'text-blue-500',
          }}
        >
          Blue Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-yellow-500',
            outlineText: 'text-yellow-500',
          }}
        >
          Yellow Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-pink-500',
            outlineText: 'text-pink-500',
          }}
        >
          Pink Chip
        </Chip>
      </Block>
    </Page>
  );
}
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

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

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/10.chip.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.