Components
Badge
Badges are used to draw attention and display statuses or counts.
Properties
BadgeA()("Badge")Examples
Variant
Set the variant attribute to change the badge's variant. Default variant is brand.
BadgeA(_.variant.brand)("Brand") // DefaultBadgeA(_.variant.success)("Success")BadgeA(_.variant.neutral)("Neutral")BadgeA(_.variant.warning)("Warning")BadgeA(_.variant.danger)("Danger")Appearance
Use the appearance attribute to change the badge's visual appearance. Default appearance is accent.
BadgeA(_.appearance.accent)("Accent") // DefaultBadgeA(_.appearance.filledOutlined)("Filled + Outlined")BadgeA(_.appearance.filled)("Filled")BadgeA(_.appearance.outlined)("Outlined")Size
Badges are sized relative to the current font size. You can set font-size on any badge (or an ancestor element) to change it.
BadgeA()( fontSize.px(12), "Brand")BadgeA()( fontSize.px(14), "Brand")BadgeA()( fontSize.px(16), "Brand")BadgeA()( fontSize.px(18), "Brand")BadgeA()( fontSize.px(20), "Brand")