Chip Generator

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

Tool

UI Elements/Chip / Tag

React×Tailwind×Design×TypeScript×

Radiuspx

Font Sizepx

Padding Xpx

Padding Ypx

Color

.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

1Choose a variant and set the colour.
2Adjust radius, padding and font size.
3Toggle the close button depending on whether chips are removable.
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.

Try next

Avatar GeneratorDesign avatars with circle, rounded or square shapes, a ring, initials and a positionable status dot. Copy the CSS.Progress Bar GeneratorBuild progress bars with height, radius, gradient or solid fill and optional stripes. Live preview, copy the CSS.Skeleton Loader GeneratorCreate skeleton screens with shimmer or pulse animation, colour and speed control. Live preview, copy the CSS.