Chip component is a small, interactive element. Chips are commonly used for contacts, text, rules, icons, and photos.

Usage no npm install needed!

<script type="module">
  import shaplaReactChip from 'https://cdn.skypack.dev/@shapla/react-chip';


Shapla React Button

A simple button, in different colors, sizes, and states

Table of contents


npm install --save @shapla/react-chip



with Sass:

import '@shapla/react-chip/src/index.scss';

with CSS:

import '@shapla/react-chip/dist/chip.css';

Javascript Instantiation

import React from 'react';
import Chip from '@shapla/react-chip';

class MyApp extends React.Component {
  render() {
    return (
      <Chip text='Sayful Islam' deletable={true} onDeleteIconClick={() => console.log('delete')}/>


Property Type Required Default Description
text String no `` Chip text
imageSrc String no `` Chip contact image url
deletable Boolean no false If set true, Delete icon will appear
small Boolean no false If set true, a small chip with display
height String no 32px Custom height of chip
onDeleteIconClick String no 32px Trigger when you click on delete icon.