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

chip

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
43
VISIBILITY
Public
PUBLISHED
4 months ago
SIZE
22 KB
A Chip displays a label that can be removed from view.
1 contributor
Install chip as a package?
Copied
npm i @bit/nexxtway.react-rainbow.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
chevron_left
chevron_right
Chip simple
import React from 'react';
import { Chip } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Chip className="rainbow-m-around_medium" label="Chip base" />

    <Chip className="rainbow-m-around_medium" label="Chip Neutral" variant="neutral" />

    <Chip className="rainbow-m-around_medium" label="Chip Neutral" variant="outline-brand" />

    <Chip className="rainbow-m-around_medium" label="Chip Brand" variant="brand" />
</div>
Deletable Chip
import React from 'react';
import { Chip } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Chip
        className="rainbow-m-around_medium"
        label="Chip base"
        onDelete={() => alert('Delete Chip!')}
    />

    <Chip
        className="rainbow-m-around_medium"
        label="Chip Neutral"
        variant="neutral"
        onDelete={() => alert('Delete Chip!')}
    />

    <Chip
        className="rainbow-m-around_medium"
        label="Chip Outline Brand"
        variant="outline-brand"
        onDelete={() => alert('Delete Chip!')}
    />

    <Chip
        className="rainbow-m-around_medium"
        label="Chip Brand"
        variant="brand"
        onDelete={() => alert('Delete Chip!')}
    />
</div>
Chip with Icon and Avatar
import React from 'react';
import { Chip, Avatar } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons';

const AvatarStyles = {
    width: '30px',
    height: '30px',
    marginTop: '-2px',
};

const ChipContainer = {
    paddingLeft: 0,
};

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Chip
        style={ChipContainer}
        className="rainbow-m-around_medium"
        label={
            <span>
                <Avatar
                    style={AvatarStyles}
                    className="rainbow-m-right_x-small"
                    src="images/user/user3.jpg"
                    assistiveText="Tahimi"
                    title="Tahimi"
                    size="medium"
                />
                Chip Base with Avatar
            </span>
        }
    />

    <Chip
        style={ChipContainer}
        className="rainbow-m-around_medium"
        variant="neutral"
        onDelete={() => alert('Delete Chip!')}
        label={
            <span>
                <Avatar
                    style={AvatarStyles}
                    className="rainbow-m-right_x-small"
                    src="images/user/user3.jpg"
                    assistiveText="Tahimi"
                    title="Tahimi"
                    size="medium"
                />
                Chip Neutral with Avatar
            </span>
        }
    />

    <Chip
        className="rainbow-m-around_medium"
        variant="outline-brand"
        label={
            <span>
                <FontAwesomeIcon
                    icon={faStar}
                    className="rainbow-color_brand rainbow-m-right_xx-small"
                />{' '}
                Chip Outline Brand with Icon
            </span>
        }
    />

    <Chip
        className="rainbow-m-around_medium"
        variant="brand"
        onDelete={() => alert('Delete Chip!')}
        label={
            <span>
                <FontAwesomeIcon
                    icon={faStar}
                    className="rainbow-color_white rainbow-m-right_xx-small"
                />{' '}
                Chip Brand{' '}
            </span>
        }
    />
</div>
Properties
NameTypeDefault valueDescription
className
stringundefined
style
objectundefined
label
string | nodenull

The content to be displayed inside the Chip.

title
stringundefined

Displays tooltip text when the mouse moves over the element.

variant
'base' | 'neutral' | 'outline-brand' | 'brand''base'

The variant changes the appearance of the Chip. Accepted variants include base, neutral, outline-brand and brand. This value defaults to base.

onDelete
functionundefined

The action triggered when the close button is clicked.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.