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

chip

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
463
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 months ago
SIZE
34 KB
Chips represent complex entities in small blocks, such as a contact
2 contributors
Install chip as a package?
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
React Native
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

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

API:

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

Properties
NameTypeDescription
avatar
element

Avatar element.

children
custom

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

classes
(required)
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 prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable.

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

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

component
elementType

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.

disabled
bool

If true, the chip should be displayed in a disabled state.

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
size
'small' | 'medium'

The size of the chip.

variant
'default' | 'outlined'

The variant to use.