npm package: @placardi/chip
Description: Placardi UI chip component
Author: Alexander Zakharov
Latest version: 0.2.3

# @placardi/chip

A chip is a compact element that represents an input, attribute or action.

## Installation

```bash
npm i @placardi/chip
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the chip component, wrap the application in global theme provider from `@placardi/theme`. Then, use the chip as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Chip variant

Chips can be customised using the `Variant` enum that comes packaged with the chip component. Pass a `variant` prop to the chip in order to change its appearance. The default is set to `Variant.CONTAINED`.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip, { Variant } from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip variant={Variant.OUTLINED}>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Chip size

Chips size can be customised using the `Size` enum that comes packaged with the chip component. Pass a `size` prop to the chip in order to change its size. The default is set to `Size.MEDIUM`.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip, { Size } from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip size={Size.SMALL}>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Chip colour

Chip colour can be customised using the `Colour` enum that comes packaged with the brand theme. Pass a `colour` prop to the chip in order to change its colour. The default is set to `Colour.NEUTRAL`.

```tsx
import React, { FC } from 'react';
import ThemeProvider, { Colour } from '@placardi/theme';
import Chip from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip colour={Colour.BLUE}>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Chip children and icons

It is possible to pass children to a chip. The most common type would usually be text. It might be necessary to add an icon for improved user experience. Icons can be passed using `icon` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip from '@placardi/chip';
import FavoriteIcon from '@material-ui/icons/Favorite';

const App: FC = () => (
  <ThemeProvider>
    <Chip icon={<FavouriteIcon />}>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Disabled state

A chip can be disabled by passing it a `disabled` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip disabled>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Clickable chips

A chip can be made clickable by passing it an `onClick` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip onClick={() => {}}>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```

### Deletable chips

A chip can be made deletable by passing it an `onDelete` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Chip from '@placardi/chip';

const App: FC = () => (
  <ThemeProvider>
    <Chip onDelete={() => {}}>Greetings!</Chip>
  </ThemeProvider>
)

export default App;
```