BadgeAlt
Alternate status or category label: tinted fill with a matching border, in three sizes.
Master
Toggle size, intent, removable and disabled to preview every BadgeAlt combination.
In progress
Usage
BadgeAlt is the alternate badge style: a light tint, a matching border and intent-colored text, with a brand intent. Use Badge by default; use BadgeAlt only where a screen already uses this style. Do not mix Badge and BadgeAlt on one screen. Only dismissible filters are removable. See contracts/badgealt.json for the full contract.
Do's
- A screen that already uses the tinted, bordered badge style.
- A brand marker, like Beta, in that style.
Don'ts
- Do not use BadgeAlt where Badge fits. Badge is the default.
- Do not mix Badge and BadgeAlt on one screen.
- Do not use as a button or link. Only the X is interactive.
- Do not use for people. Use Avatar.
- Do not put sentences in a badge.
- Do not use raw hex.
<BadgeAlt intent="info" size="md" > In progress </BadgeAlt>