Chip Row

Updated 2 weeks ago

Live preview

default

primary

accent

neutral

warning

success

Style

Visual design rationale for the chip row component.

Token mapping

ElementToken
Chip surface{semantic.surface-raised}
Label prefix text{semantic.ink-secondary}
Value text{semantic.ink-primary}
Primary variant accent{semantic.interactive-primary}
Warning variant accent{semantic.status-warning}
Success variant accent{semantic.status-success}

Structure

Each chip is inline-flex, constrained height, consistent border-radius — the label prefix renders in the monospace face to visually distinguish it from the value it precedes.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.