# ion-chip

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

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description                                                                                                                                                                                                                                                            | Type    |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `color`  | `color`   | 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). | `Color` |
| `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`  |


## CSS Custom Properties

| Name                     | Description                      |
| ------------------------ | -------------------------------- |
| `--avatar-height`        | Height of the chip avatar        |
| `--avatar-margin-bottom` | Margin bottom of the chip avatar |
| `--avatar-margin-end`    | Margin end of the chip avatar    |
| `--avatar-margin-start`  | Margin start of the chip avatar  |
| `--avatar-margin-top`    | Margin top of the chip avatar    |
| `--avatar-width`         | Width of the chip avatar         |
| `--background`           | Background of the chip           |
| `--color`                | Color of the chip                |
| `--label-margin-bottom`  | Margin bottom of the chip label  |
| `--label-margin-end`     | Margin end of the chip label     |
| `--label-margin-start`   | Margin start of the chip label   |
| `--label-margin-top`     | Margin top of the chip label     |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
