NAVRENZA / WORKSPACE
Badges & progress
Home / UI Features / Badges & progress
Color & style library
Six semantic colors, four treatments. Labels make meaning clear beyond color alone.
Soft
PrimarySecondarySuccessDangerWarningInfo
Solid
PrimarySecondarySuccessDangerWarningInfo
Outline
PrimarySecondarySuccessDangerWarningInfo
Pill
PrimarySecondarySuccessDangerWarningInfo
Sizes & shapes
Small details that fit every context
SmallMediumLarge
Rounded pillRounded labelSquare label
Product updates New
Status indicators
Readable status labels with a supporting dot
ActivePendingBlockedOfflineIn reviewScheduled
Use clear labels for connection, workflow and account states.
Icons & achievements
Add a little context to important milestones
CompletedVerifiedPro planFeaturedAwaiting review
Notification counts
Counts on buttons and compact notification indicators
99+
8 unread demo notifications.
Removable tags
Useful for filters, selected values and categories
ReactTypeScriptBootstrapDesign system
4 tags selected
Badges in a list
A practical example of priority and workflow labels
Website redesignHigh priority
Design systemIn progress
Customer onboardingReady
Progress indicators
Pair progress with a readable completion label
Planning20%
Design40%
Development60%
Review80%
Delivered100%