Skip to contentQuick Decision Rules
- Use Badge for compact status or category metadata.
- Use Alert for short semantic feedback messages.
- Use Spinner for compact indeterminate loading.
- Use Progress for temporal completion.
- Use Meter for bounded descriptive measurement.
- Use MeterStack when one measurement is composed of meaningful parts.
- Use Avatar for one person or entity identity surface.
- Use AvatarStack for a compact group identity signal.
By Meaning
Common Misclassifications
- Do not use Badge for full messages that need hierarchy or explanation.
- Do not use Alert as a neutral layout container.
- Do not use Spinner when exact progress is known.
- Do not use Progress for static scores or quotas.
- Do not use Meter for async completion.
- Do not use AvatarStack when explicit names or roles matter more than compactness.
Start Here