Chip

A compact element that displays information or actions.

Installation

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

Peer dependencies

# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native

Usage

Basic

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:

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