4.0.1 • Published 8 months ago
@licuido-ui/ui_chip v4.0.1
Chip
Chips are compact elements that represent an input, attribute, or action.
Author
- @author Henry Dyson J henry@crayond.co
Link
PlayGround
Installation
npm i @licuido-ui/ui_ChipImport 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' |
4.0.1
8 months ago