DevKit Tools

Chip Generator

Build chips and tags in three variants with an optional close button. Control radius, padding and font size.

UI Elements/Chip / Tag
React×Tailwind×Design×TypeScript×
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(109, 94, 252, 0.15); color: #6d5efc;
}
.chip .close { cursor: pointer; opacity: .7; font-weight: 700; }
.chip .close:hover { opacity: 1; }

About the chip generator

Chips represent selections: applied filters, chosen categories, recipients in a field. The close button is what distinguishes them from badges, since it signals the item can be removed.

They are usually laid out in a wrapping flex row with a small gap, so a long list flows naturally onto more lines.

How to use it

  1. 1Choose a variant and set the colour.
  2. 2Adjust radius, padding and font size.
  3. 3Toggle the close button depending on whether chips are removable.
  4. 4Copy the CSS.

Questions

How do I lay out a row of chips?

A flex container with flex-wrap: wrap and a gap of about six pixels. They then flow onto new lines without any extra work.

Should the close button be a real button?

Yes, with an aria-label such as "Remove React filter". A bare span is invisible to keyboard and screen reader users.

Chip or badge?

Chip when the user can act on it, badge when it is purely informational.

More CSS tools

Glassmorphism GeneratorNeumorphism GeneratorBox Shadow GeneratorText Shadow GeneratorHover Effect GeneratorCSS Filter GeneratorCSS Gradient GeneratorMesh Gradient GeneratorCSS Pattern GeneratorGradient Text GeneratorBorder Radius GeneratorClip Path GeneratorCSS Transform GeneratorGradient Border GeneratorDivider GeneratorCSS Button GeneratorNav Bar GeneratorCard GeneratorTabs GeneratorTable GeneratorAlert GeneratorBreadcrumb GeneratorToggle Switch GeneratorCheckbox GeneratorRadio Button GeneratorTooltip GeneratorInput Field GeneratorBadge GeneratorAvatar GeneratorProgress Bar GeneratorSkeleton Loader GeneratorScrollbar GeneratorLoader GeneratorCSS Animation Generator