Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

chip

v3.9.2arrow_drop_down
v3.9.2
STATUS
Passing
DOWNLOADS
357
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
6 months ago
SIZE
24 KB
subject
Chips represent complex entities in small blocks, such as a contact.
1 contributor
Use chip in your project ?
Copied
npm i @bit/mui-org.material-ui.chip
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
withStyles(styles)(ChipsPlayground);
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Chip ()

Chips represent complex entities in small blocks, such as a contact.

Properties
NameTypeDefault valueDescription
avatar
element

Avatar element.

children
custom

This property isn’t supported. Use the component property if you need to change the children structure.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
clickable
bool

If true, the chip will appear clickable, and will raise when pressed, even if the onClick property is not defined. If false, the chip will not be clickable, even if onClick property is defined. This can be used, for example, along with the component property to indicate an anchor Chip is clickable.

color
'default' | 'primary' | 'secondary''default'

The color of the component. It supports those theme colors that make sense for this component.

component
custom'div'

The component used for the root node. Either a string to use a DOM element or a component.

deleteIcon
element

Override the default delete icon element. Shown only if onDelete is set.

icon
element

Icon element.

label
node

The content of the label.

onClick
function
onDelete
function

Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.

onKeyDown
function
onKeyUp
function
tabIndex
number | string
variant
'default' | 'outlined''default'

The variant to use.