4.0.1 • Published 8 months ago

@licuido-ui/ui_chip v4.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

Chip

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

Author

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

alt text

Sample Code

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

Props

NameDescriptionDefaultControl
classNamestringstringstring
sxSxPropsSxProps{}
handleClick()=>{}()=>{}
handleDelete()=>{}()=>{}
deleteIconReactNodeReactNodeReactNode
startIconReactNodeReactNodeReactNode
chipStylesSxPropSxPropSxProp
labelstringstringstring
chipStylesSxPropSxPropSxProp
labelstringstringstring
labelStylesSxPropSxPropSxProp
chipDirection'column' or 'column-reverse' or 'row' or 'row-reverse''column' or 'column-reverse' or 'row' or 'row-reverse''column'