Chip

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

Author

• @author Henry Dyson J [email protected]

Link

Story Book Link Chip

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_Chip

Import component

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

Usage

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

Image

Sample Code

<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' |