Visual effects enhanced for a chip to provide convenient feedback when a user interacts with the item.

Smooth animation implemented for an Active chip, when clicked. Simple Check icon appears slightly and disappears after second tap or click. The content is pushed and slides to the right.

Mobile & Web styles are available. It's recommended to use Rounded chip for a variety of cases, but in additional Square chips are your best fit for dense desktop layout.

Variants of Chips purposes as: Text-only, Closable, Contact, Icon Chip and Chip with implemented Counter.

Groups of chips available. Choose between Rounded for mobile or Square for desktop applications.

Chips UI for React

FILLED CHIPS

Default Material style for impact filtering flows. Each chip gets lifted up while onHovered. And toggles into Selected mode after a single click.

Implementation for Filled Chips

Available in styles:
.chipSmoothDark, .chipSmoothBlue, .chipSmoothRed, .chipSmoothGreen, .chipSmoothYellow
.chipSmoothContactDark, .chipSmoothContactBlue, .chipSmoothContactRed, .chipSmoothContactGreen, .chipSmoothContactYellow
.chipIconDark, .chipIconBlue, .chipIconRed, .chipIconGreen, .chipIconYellow
.chipSmoothBadgesDark, .chipSmoothBadgesBlue, .chipSmoothBadgesRed, .chipSmoothBadgesGreen, .chipSmoothBadgesYellow

import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import { Cancel } from '@material-ui/icons';
...
<Chips className="chipSmoothDark" Checked >
   Smooth
   <span><Cancel/></span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsUserpic.css';
import avatar from './components/assets/img/avatar.svg';
...
<Chips className="chipSmoothContactDark">
   <img src={avatar}/>
   <span>Mr. Userpic</span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsIcon.css';
import { Favorite } from '@material-ui/icons';
...
<Chips className="chipIconDark">
   <span><Favorite/></span>
   Icon Chip
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsBadges.css';
...
<Chips
   className="chipSmoothBadgesDark"
      badges="divChipsBadgeDark" value="16" >
   Categories
</Chips>

OUTLINED CHIPS

Implemented in this Material theme as an alternative style to display chips with less Impactful meaning. Styled with a bolder border when onHovered.

Implementation for Outlined Chips

Available in styles:
.chipOutlinedDark, .chipOutlinedBlue, .chipOutlinedRed, .chipOutlinedGreen, .chipOutlinedYellow
.chipOutlinedContactDark, .chipOutlinedContactBlue, .chipOutlinedContactRed, .chipOutlinedContactGreen, .chipOutlinedContactYellow
.chipOutlinedIconDark, .chipOutlinedIconBlue, .chipOutlinedIconRed, .chipOutlinedIconGreen, .chipOutlinedIconYellow
.chipOutlinedBadgesDark, .chipOutlinedBadgesBlue, .chipOutlinedBadgesRed, .chipOutlinedBadgesGreen, .chipOutlinedBadgesYellow

import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import { Cancel } from '@material-ui/icons';
...
<Chips className="chipOutlinedDark">
   Smooth
   <span><Cancel/></span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsUserpic.css';
import avatar from './components/assets/img/avatar.svg';
...
<Chips className="chipOutlinedContactDark" Checked >
   <img src={avatar}/>
   <span>Mr. Userpic</span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsIcon.css';
import { AccessTime } from '@material-ui/icons';
    ...
<Chips className="chipOutlinedIconDark">
   <span><AccessTime/></span>
   Icon Chip
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsBadges.css';
<Chips
   className="chipOutlinedBadgesDark"
      badgesOut="divChipsOutlinedBadgeDark" value="16" >
   Categories
</Chips>

SQUARE CHIPS

A variant of dense chips especially recommended for using in detailed and complicated web or desktop software.

Implementation for Square Chips

Available in styles:
.chipDefDarkRight, .chipDefBlueRight, .chipDefRedRight, .chipDefGreenRight, .chipDefYellowRight
.chipDefDarkLeft .chipDefBlueLeft, .chipDefRedLeft, .chipDefGreenLeft, .chipDefYellowLeft
.chipDefDarkSmall, .chipDefBlueSmall, .chipDefRedSmall, .chipDefGreenSmall, .chipDefYellowSmall
.chipDefOutlinedDarkRight, .chipDefOutlinedBlueRight, .chipDefOutlinedRedRight, .chipDefOutlinedGreenRight, .chipDefOutlinedYellowRight
.chipDefOutlinedDarkLeft, .chipDefOutlinedBlueLeft, .chipDefOutlinedRedLeft, .chipDefOutlinedGreenLeft, .chipDefOutlinedYellowLeft
.chipDefOutlinedDarkSmall, .chipDefOutlinedBlueSmall, .chipDefOutlinedRedSmall, .chipDefOutlinedGreenSmall, .chipDefOutlinedYellowSmall

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Close } from '@material-ui/icons';
...
<Chips className="chipDefDarkRight">
   Smooth<Close/>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipDefDarkLeft">
   <Done/>Checked
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
<Chips className="chipDefDarkSmall" Checked >
   <span>16</span> Items
</Chips>

/*Outlined*/
    
import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Close } from '@material-ui/icons';
...
<Chips className="chipDefOutlinedDarkRight">
   Smooth <Close/>
/Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipDefOutlinedDarkLeft">
   <Done/>Checked
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
...
<Chips className="chipDefOutlinedDarkSmall">
   <span>16</span> Items
</Chips>

CHIPS GROUP: OUTLINE

Production-ready group component made of simple outlined chips for default selection

Implementation for Group Outline

Available in styles: same as listed above

import Chips from './components/Chips.js';
import './components/assets/ChipsIcon.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipOutlinedIconBlueAnim">
   <span><Done/></span>badminton
</Chips>

CHIPS GROUP: CONTACTS

Predefined combination of Chips for every case when a user interacts with selection or filtering for a group of Contacts.

Implementation for Group Contacts

Available in styles: same as listed above

import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import avatar from './components/assets/img/avatar.svg';
...
<Chips className="chipSmoothContactDark">
   <img src={avatar}/>
      <span>Mr. Userpic</span>
</Chips>

CHIPS GROUP: DELETION

In some cases Delete functionality for every chip in a group is required.

Implementation for Group Deletion

Available in styles: same as listed above

import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import { Cancel } from '@material-ui/icons';
...
<Chips
   className="chipSmoothDark"
      Close icon={<Cancel/>}>
      Lucas Schultz
</Chips>

CHIPS GROUP: SQUARE

All combinations listed above available in dense Square Chips styled for the optimal performance within desktop resolutions

Implementation for Group Square

Available in styles: same as listed above

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipDefDarkLeftAnim">
   <Done/>Soccer
</Chips>