# ion-chip

URL: https://ionicframework.com/docs/api/chip

**Encapsulation**: [shadow](/docs/reference/glossary.md#shadow)

Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.

## Basic Usage

**JavaScript**

```html
<ion-chip>Default</ion-chip>
<ion-chip disabled="true">Disabled</ion-chip>
<ion-chip outline="true">Outline</ion-chip>
```

**Angular**

`src/app/example.component.html`

```html
<ion-chip>Default</ion-chip>
<ion-chip [disabled]="true">Disabled</ion-chip>
<ion-chip [outline]="true">Outline</ion-chip>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonChip } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonChip],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonChip } from '@ionic/react';
function Example() {
  return (
    <>
      <IonChip>Default</IonChip>
      <IonChip disabled={true}>Disabled</IonChip>
      <IonChip outline={true}>Outline</IonChip>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-chip>Default</ion-chip>
  <ion-chip :disabled="true">Disabled</ion-chip>
  <ion-chip :outline="true">Outline</ion-chip>
</template>

<script setup lang="ts">
  import { IonChip } from '@ionic/vue';
</script>
```

## Slotting Components and Icons

**JavaScript**

`index.html`

```html
<ion-chip>
  <ion-avatar>
    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
  </ion-avatar>
  <ion-label>Avatar Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

<ion-chip>
  <ion-icon name="pin" color="primary"></ion-icon>
  <ion-label>Icon Chip</ion-label>
  <ion-icon name="close"></ion-icon>
</ion-chip>
```

`index.ts`

```ts
import { defineCustomElements } from '@ionic/core/loader';

import { addIcons } from 'ionicons';
import { close, closeCircle, pin } from 'ionicons/icons';

/* Core CSS required for Ionic components to work properly */
import '@ionic/core/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/core/css/normalize.css';
import '@ionic/core/css/structure.css';
import '@ionic/core/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/core/css/padding.css';
import '@ionic/core/css/float-elements.css';
import '@ionic/core/css/text-alignment.css';
import '@ionic/core/css/text-transformation.css';
import '@ionic/core/css/flex-utils.css';
import '@ionic/core/css/display.css';

/**
 * Ionic Dark Palette
 * -----------------------------------------------------
 * For more information, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

// import '@ionic/core/css/palettes/dark.always.css';
// import '@ionic/core/css/palettes/dark.class.css';
import '@ionic/core/css/palettes/dark.system.css';

/* Theme variables */
import './theme/variables.css';

/**
 * On Ionicons 7.2+ these icons
 * get mapped to a kebab-case key.
 * Alternatively, developers can do:
 * addIcons({ 'close': close, 'close-circle': closeCircle, 'pin': pin });
 */
addIcons({ close, closeCircle, pin });

defineCustomElements();
```

**Angular**

`src/app/example.component.html`

```html
<ion-chip>
  <ion-avatar>
    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
  </ion-avatar>
  <ion-label>Avatar Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

<ion-chip>
  <ion-icon name="pin" color="primary"></ion-icon>
  <ion-label>Icon Chip</ion-label>
  <ion-icon name="close"></ion-icon>
</ion-chip>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/angular';

import { addIcons } from 'ionicons';
import { close, closeCircle, pin } from 'ionicons/icons';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonAvatar, IonChip, IonIcon, IonLabel],
})
export class ExampleComponent {
  constructor() {
    /**
     * Any icons you want to use in your application
     * can be registered in app.component.ts and then
     * referenced by name anywhere in your application.
     */
    addIcons({ close, closeCircle, pin });
  }
}
```

**React**

```tsx
import React from 'react';
import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/react';
import { close, closeCircle, pin } from 'ionicons/icons';

function Example() {
  return (
    <>
      <IonChip>
        <IonAvatar>
          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </IonAvatar>
        <IonLabel>Avatar Chip</IonLabel>
        <IonIcon icon={closeCircle}></IonIcon>
      </IonChip>

      <IonChip>
        <IonIcon icon={pin} color="primary"></IonIcon>
        <IonLabel>Icon Chip</IonLabel>
        <IonIcon icon={close}></IonIcon>
      </IonChip>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-chip>
    <ion-avatar>
      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
    </ion-avatar>
    <ion-label>Avatar Chip</ion-label>
    <ion-icon :icon="closeCircle"></ion-icon>
  </ion-chip>

  <ion-chip>
    <ion-icon :icon="pin" color="primary"></ion-icon>
    <ion-label>Icon Chip</ion-label>
    <ion-icon :icon="close"></ion-icon>
  </ion-chip>
</template>

<script setup lang="ts">
  import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/vue';
  import { close, closeCircle, pin } from 'ionicons/icons';
</script>
```

## Theming

### Colors

**JavaScript**

```html
<ion-chip>Default</ion-chip>
<ion-chip color="primary">Primary</ion-chip>
<ion-chip color="secondary">Secondary</ion-chip>
<ion-chip color="tertiary">Tertiary</ion-chip>
<ion-chip color="success">Success</ion-chip>
<ion-chip color="warning">Warning</ion-chip>
<ion-chip color="danger">Danger</ion-chip>
<ion-chip color="light">Light</ion-chip>
<ion-chip color="medium">Medium</ion-chip>
<ion-chip color="dark">Dark</ion-chip>
```

**Angular**

`src/app/example.component.html`

```html
<ion-chip>Default</ion-chip>
<ion-chip color="primary">Primary</ion-chip>
<ion-chip color="secondary">Secondary</ion-chip>
<ion-chip color="tertiary">Tertiary</ion-chip>
<ion-chip color="success">Success</ion-chip>
<ion-chip color="warning">Warning</ion-chip>
<ion-chip color="danger">Danger</ion-chip>
<ion-chip color="light">Light</ion-chip>
<ion-chip color="medium">Medium</ion-chip>
<ion-chip color="dark">Dark</ion-chip>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonChip } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonChip],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonChip } from '@ionic/react';
function Example() {
  return (
    <>
      <IonChip>Default</IonChip>
      <IonChip color="primary">Primary</IonChip>
      <IonChip color="secondary">Secondary</IonChip>
      <IonChip color="tertiary">Tertiary</IonChip>
      <IonChip color="success">Success</IonChip>
      <IonChip color="warning">Warning</IonChip>
      <IonChip color="danger">Danger</IonChip>
      <IonChip color="light">Light</IonChip>
      <IonChip color="medium">Medium</IonChip>
      <IonChip color="dark">Dark</IonChip>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-chip>Default</ion-chip>
  <ion-chip color="primary">Primary</ion-chip>
  <ion-chip color="secondary">Secondary</ion-chip>
  <ion-chip color="tertiary">Tertiary</ion-chip>
  <ion-chip color="success">Success</ion-chip>
  <ion-chip color="warning">Warning</ion-chip>
  <ion-chip color="danger">Danger</ion-chip>
  <ion-chip color="light">Light</ion-chip>
  <ion-chip color="medium">Medium</ion-chip>
  <ion-chip color="dark">Dark</ion-chip>
</template>

<script setup lang="ts">
  import { IonChip } from '@ionic/vue';
</script>
```

### CSS Custom Properties

**JavaScript**

```html
<style>
  ion-chip {
    --background: #00213f;
    --color: #adefd1;
  }
</style>

<ion-chip>Default</ion-chip>
```

**Angular**

`src/app/example.component.html`

```html
<ion-chip>Default</ion-chip>
```

`src/app/example.component.css`

```css
ion-chip {
  --background: #00213f;
  --color: #adefd1;
}
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonChip } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonChip],
})
export class ExampleComponent {}
```

**React**

`src/main.css`

```css
ion-chip {
  --background: #00213f;
  --color: #adefd1;
}
```

`src/main.tsx`

```tsx
import React from 'react';
import { IonChip } from '@ionic/react';

import './main.css';

function Example() {
  return <IonChip>Default</IonChip>;
}
export default Example;
```

**Vue**

```html
<style>
  ion-chip {
    --background: #00213f;
    --color: #adefd1;
  }
</style>

<template>
  <ion-chip>Default</ion-chip>
</template>

<script setup lang="ts">
  import { IonChip } from '@ionic/vue';
</script>
```

## Properties

### color

**Description**: The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics.md).

**Attribute**: `color`

**Type**: `"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined`

**Default**: `undefined`

### disabled

**Description**: If `true`, the user cannot interact with the chip.

**Attribute**: `disabled`

**Type**: `boolean`

**Default**: `false`

### mode

**Description**: The mode determines which platform styles to use. This is a [virtual property](/docs/core-concepts/fundamentals.md#virtual-properties) that is set once during initialization and will not update if you change its value after the initial render.

**Attribute**: `mode`

**Type**: `"ios" | "md"`

**Default**: `undefined`

### outline

**Description**: Display an outline style button.

**Attribute**: `outline`

**Type**: `boolean`

**Default**: `false`

## Events

No events available for this component.

## Methods

No public methods available for this component.

## CSS Shadow Parts

No CSS shadow parts available for this component.

## CSS Custom Properties

**iOS**

| Name | Description |
| --- | --- |
| `--background` | Background of the chip |
| `--color` | Color of the chip |

**MD**

| Name | Description |
| --- | --- |
| `--background` | Background of the chip |
| `--color` | Color of the chip |

## Slots

| Name | Description |
| --- | --- |
|  | The default slot |