@placardi/chip

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

Installation

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.

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.

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.

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.

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.

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.

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.

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.

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;