# Chip

A compact element that displays information or actions.

---

## Installation

```bash
npm install @cleartrip/ct-design-chip
# or
pnpm add @cleartrip/ct-design-chip
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { Chip } from '@cleartrip/ct-design-chip';

function Example() {
  return (
    <Chip>
      {/* Basic usage */}
    </Chip>
  );
}
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `id` | `string` | — | No | id property |
| `crossIconProps` | `SVGProps<SVGSVGElement>` | — | No | crossIconProps property |
| `label` | `ReactNode | string` | — | No | label property |
| `labelVariant` | `TypographyVariantType` | — | No | labelVariant property |
| `showIcon` | `boolean` | — | No | showIcon property |
| `iconPosition` | ``${IconPosition` | — | No | iconPosition property |

---

## ChipVariant

- `DEFAULT` — default
- `DISABLED` — disabled
- `GRADIENT` — gradient
---

## ChipSizeType

- `SMALL` — sm
- `MEDIUM` — md
---

## Accessibility

- The component follows accessibility best practices
- Ensure proper ARIA attributes are provided where needed
- Test with screen readers to ensure usability

---

## Migration

If migrating from a previous version:

```diff
- import { Chip } from 'yagami/core/components';
+ import { Chip } from '@cleartrip/ct-design-chip';
```