npm package: @licuido-ui/ui_chip
Description: Chips are compact elements that represent an input, attribute, or action.
Latest version: 4.0.1

# Chip

Chips are compact elements that represent an input, attribute, or action.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link Chip](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_Chip
```

## Import component

```jsx
import { Chip } from '@licuido-ui/ui_Chip';
```

## Usage

```jsx
<Chip
  label={'This is chip label'}
  handleClick={() => console.log('handleClick')}
  handleDelete={() => console.log('handleDelete')}
  deleteIcon={<DeleteIcon />}
  chipStyles={{}}
  labelStyles={{}}
/>
```

## Image

![alt text](./Chip.png)

## Sample Code

```jsx
<Chip
  label={'This is chip label'}
  handleClick={() => console.log('handleClick')}
  handleDelete={() => console.log('handleDelete')}
  deleteIcon={<DeleteIcon />}
  chipStyles={{}}
/>
```

## Props

| **Name**          | Description                                                  | Default                                                      | Control   |
| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | --------- |
| **className**     | string                                                       | string                                                       | string    |
| **sx**            | SxProps                                                      | SxProps                                                      | {}        |
| **handleClick**   | ()=>{}                                                       | ()=>{}                                                       |           |
| **handleDelete**  | ()=>{}                                                       | ()=>{}                                                       |           |
| **deleteIcon**    | ReactNode                                                    | ReactNode                                                    | ReactNode |
| **startIcon**     | ReactNode                                                    | ReactNode                                                    | ReactNode |
| **chipStyles**    | SxProp                                                       | SxProp                                                       | SxProp    |
| **label**         | string                                                       | string                                                       | string    |
| **chipStyles**    | SxProp                                                       | SxProp                                                       | SxProp    |
| **label**         | string                                                       | string                                                       | string    |
| **labelStyles**   | SxProp                                                       | SxProp                                                       | SxProp    |
| **chipDirection** | 'column' `or` 'column-reverse' `or` 'row' `or` 'row-reverse' | 'column' `or` 'column-reverse' `or` 'row' `or` 'row-reverse' | 'column'  |