Chip

<div className="docs-vertical-group">
  <div className="docs-inline-group">
    <Chip>Default</Chip>
  </div>
  <div className="docs-inline-group">
    <Chip theme="red">Red</Chip>
    <Chip theme="orange">Orange</Chip>
    <Chip theme="gold">Gold</Chip>
    <Chip theme="green">Green</Chip>
    <Chip theme="blue">Blue</Chip>
    <Chip theme="purple">Purple</Chip>
    <Chip theme="neutral">Neutral</Chip>
  </div>
  <div className="docs-inline-group">
    <Chip theme="red-inverse">Red Inverse</Chip>
    <Chip theme="orange-inverse">Orange Inverse</Chip>
    <Chip theme="gold-inverse">Gold Inverse</Chip>
    <Chip theme="green-inverse">Green Inverse</Chip>
  </div>
  <div className="docs-inline-group">
    <Chip theme="blue-inverse">Blue Inverse</Chip>
    <Chip theme="purple-inverse">Purple Inverse</Chip>
    <Chip theme="neutral-inverse">Neutral Inverse</Chip>
  </div>
</div>

<Chip>
  Default <Icon className="ml-2" size="xsmall" icon="close" />
</Chip>

<div className="docs-inline-group">
  <Chip rounded>Default</Chip>
  <Chip rounded theme="red">
    Red
  </Chip>
  <Chip rounded theme="orange">
    Orange
  </Chip>
  <Chip rounded theme="gold">
    Gold
  </Chip>
  <Chip rounded theme="green">
    Green
  </Chip>
  <Chip rounded theme="blue">
    Blue
  </Chip>
  <Chip rounded theme="purple">
    Purple
  </Chip>
  <Chip rounded theme="neutral">
    Neutral
  </Chip>
  <Chip theme="neutral-inverse" rounded>
    Neutral Inverse
  </Chip>
</div>

<div className="docs-inline-group">
  <Chip backgroundImage="http://lorempixel.com/100/50/city/">
    With Background Image
  </Chip>
  <Chip rounded backgroundImage="http://lorempixel.com/100/50/city/">
    With Background Image
  </Chip>
  <Chip
    className="py-1 px-3"
    rounded
    backgroundImage="http://lorempixel.com/100/50/city/"
  >
    With Background Image
  </Chip>
</div>