# @cleartrip/ct-design-chip

> Chip Component

Latest version **5.28.0** (published 2026-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cleartrip/ct-design-chip
pnpm add @cleartrip/ct-design-chip
yarn add @cleartrip/ct-design-chip
bun add @cleartrip/ct-design-chip
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.28.0 |
| Published | 2026-10-21 |
| First published | 2023-11-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 107.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cleartrip |
| Maintainers | rahulct_com, supragya.chauhan, nareshkapse_ct, saranshdawra, ct_devops, sidhantrajan, hello_world_arya, ritesh.kumarjena, mohitjaincleartrip, ashwin.ct, ashokmpatel, amansaxena1, aakrishtmalik, prateek.oraon, ashwin-ui-ct, shashi-kumar |

## Links

- npm: https://www.npmjs.com/package/@cleartrip/ct-design-chip
- npm.io page: https://npm.io/package/@cleartrip/ct-design-chip

## Dependencies (7)

- [@cleartrip/ct-design-icons](https://npm.io/package/@cleartrip/ct-design-icons.md) 62.0.0
- [@cleartrip/ct-design-theme](https://npm.io/package/@cleartrip/ct-design-theme.md) 5.28.0
- [@cleartrip/ct-design-container](https://npm.io/package/@cleartrip/ct-design-container.md) 5.28.0
- [@cleartrip/ct-design-typography](https://npm.io/package/@cleartrip/ct-design-typography.md) 5.28.0
- [@cleartrip/ct-design-style-manager](https://npm.io/package/@cleartrip/ct-design-style-manager.md) 5.28.0
- [@cleartrip/ct-design-conditional-wrap](https://npm.io/package/@cleartrip/ct-design-conditional-wrap.md) 5.28.0
- [@cleartrip/ct-design-event-propagation](https://npm.io/package/@cleartrip/ct-design-event-propagation.md) 5.28.0

## Recent versions

- 5.28.0 (latest) — 2026-10-21
- 5.27.0-SNAPSHOT-native-main.16 (SNAPSHOT-native-main) — 2026-10-21
- 5.28.0-SNAPSHOT-holiday-packages-bottomsheet-fix.0 (SNAPSHOT-holiday-packages-bottomsheet-fix) — 2026-10-21
- 5.28.0-SNAPSHOT-inter-2.0 (SNAPSHOT-inter-2) — 2026-10-20
- 5.28.0-SNAPSHOT-impression-fix.0 (SNAPSHOT-impression-fix) — 2026-10-16
- 5.28.0-SNAPSHOT-inter-1.0 (SNAPSHOT-inter-1) — 2026-10-14
- 3.32.0-SNAPSHOT-sme-ct-design-common131026.0 (SNAPSHOT-sme-ct-design-common131026) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-6.0 (SNAPSHOT-figtree-261013-6) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-5.0 (SNAPSHOT-figtree-261013-5) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-4.0 (SNAPSHOT-figtree-261013-4) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-3.0 (SNAPSHOT-figtree-261013-3) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-2.0 (SNAPSHOT-figtree-261013-2) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-1.0 (SNAPSHOT-figtree-261013-1) — 2026-10-13
- 5.27.0-SNAPSHOT-biztrip-snapshot-13oct.0 (SNAPSHOT-biztrip-snapshot-13oct) — 2026-10-13
- 3.32.0-SNAPSHOT-sme-ct-design-common061026.0 (SNAPSHOT-sme-ct-design-common061026) — 2026-10-06
- … 1050 more at https://npm.io/package/@cleartrip/ct-design-chip/versions

## README

# 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';
```

---
_Source: https://npm.io/package/@cleartrip/ct-design-chip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._