Showing state and identity
11 components · 7 systemsSmall signs that say how far something has got, what state it is in, what it is called, or whose it is. Each block below is one system’s whole set of these components, drawn by its own package. To compare one control across every system drawn, open it from the rail.
Ant Design
11 of 11 drawn Tag Tag
Badge Badge
Progress bar Progress
Empty state Empty
Avatar Avatar
Dismissible tag Tag (with closeIcon / onClose)
Spinner Spin
Step indicator Steps
Tag group Tag.CheckableTagGroup
Avatar group Avatar.Group
Skeleton Skeleton
Carbon
8 of 11 drawn Tag Tag
Badge Badge indicator
Progress bar Progress bar
Empty state Empty states
absentCarbon does not ship avatar. Nothing is drawn in its place.
Dismissible tag Dismissible tag
Spinner Loading
Step indicator Progress indicator
Tag group Tag overflow
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
absentCarbon does not ship avatar group. Nothing is drawn in its place.
Skeleton Skeleton text, icon, placeholder
GOV.UK
1 of 11 drawn Tag Tag
Badge Tag
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
absentGOV.UK does not ship progress bar. Nothing is drawn in its place.
absentGOV.UK does not ship empty state. Nothing is drawn in its place.
absentGOV.UK does not ship avatar. Nothing is drawn in its place.
absentGOV.UK does not ship dismissible tag. Nothing is drawn in its place.
absentGOV.UK does not ship spinner. Nothing is drawn in its place.
absentGOV.UK does not ship step indicator. Nothing is drawn in its place.
absentGOV.UK does not ship tag group. Nothing is drawn in its place.
absentGOV.UK does not ship avatar group. Nothing is drawn in its place.
absentGOV.UK does not ship skeleton. Nothing is drawn in its place.
Material Web
5 of 11 drawn Tag Chips (assist, filter, input, suggestion)
absentMaterial Web does not ship badge. Nothing is drawn in its place.
Progress bar Progress indicators (<md-circular-progress>, <md-linear-progress>)
absentMaterial Web does not ship empty state. Nothing is drawn in its place.
absentMaterial Web does not ship avatar. Nothing is drawn in its place.
Dismissible tag Input chip (<md-input-chip>)
Spinner Circular progress, indeterminate (<md-circular-progress indeterminate>)
absentMaterial Web does not ship step indicator. Nothing is drawn in its place.
Tag group Chip set (<md-chip-set>)
absentMaterial Web does not ship avatar group. Nothing is drawn in its place.
absentMaterial Web does not ship skeleton. Nothing is drawn in its place.
Primer
8 of 11 drawn Tag Label
Badge CounterLabel
Progress bar ProgressBar
Empty state Blankslate
Avatar Avatar
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Dismissible tag Token
Spinner Spinner
absentPrimer does not ship step indicator. Nothing is drawn in its place.
Tag group LabelGroup
Avatar group AvatarStack
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Skeleton SkeletonBox, SkeletonText, SkeletonAvatar
Spectrum
6 of 11 drawn Tag Tag
Badge Badge
Progress bar Progress bar; Progress circle
Empty state Illustrated message
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Avatar Avatar
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Dismissible tag Tag (removable)
Spinner Progress circle (indeterminate)
Step indicator Step list
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Tag group Tag group
Avatar group Avatar group
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Skeleton Skeleton
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
USWDS
3 of 11 drawn Tag Tag
Badge Tag
shipped, not drawn hereDocumented by the system but not drawable from the package used for the frames; see the component page for why.
Progress bar Step indicator
absentUSWDS does not ship empty state. Nothing is drawn in its place.
absentUSWDS does not ship avatar. Nothing is drawn in its place.
absentUSWDS does not ship dismissible tag. Nothing is drawn in its place.
absentUSWDS does not ship spinner. Nothing is drawn in its place.
Step indicator Step indicator
absentUSWDS does not ship tag group. Nothing is drawn in its place.
absentUSWDS does not ship avatar group. Nothing is drawn in its place.
absentUSWDS does not ship skeleton. Nothing is drawn in its place.