Badge

28 October 2026

Breaking

• The emphasis prop is renamed variant (subtle, bold). Migrate emphasis="bold" to variant="bold".
• The badge-height and badge-padding-inline tokens split by size: badge-height-sm|md, badge-padding-inline-sm|md.

Added

• Badge fades in over 110 ms with motion.reveal when it appears; a new key refreshes it with the same fade when the status changes.
• size (sm 16 px, md 20 px; default md).
• startIcon for a decorative icon before the text (12 px, badge-icon-size).
• The data-component="badge" attribute.
• Bold text contrast is at least 4.5:1 in every tone, brand and mode (lowest: warning 4.72:1, success 5.03:1, danger 5.63:1 in light mode); the token test checks it on every build.
• count and max: a number instead of text, 99+ above max; dot: a tone dot without text; both read label.
• variant="outline": no fill, border and text in the tone colour.
• The badge-dot-size component token.

Changed

• New category tones violet, teal and pink: the pastel tag pairs; on bold the fill and the text swap.
• The status tones use the pastel fill, border and text pairs.
• variant="outline" also covers the violet, teal and pink category hues (tag-*-border, tag-*-foreground); the neutral tone’s border is status-neutral-border.

Fixed

• The Turkish variant names are now “Sade”, “Belirgin” and “Çerçeveli”; “Güçlü” is no longer used.

26 October 2026

Added

• First release: six tones (neutral, brand, info, success, warning, danger) and two emphasis levels (subtle, bold).
• Colours and sizes come from tokens; light and dark mode and brand changes need no extra setup.
• Text contrast for every tone and emphasis is checked in the token test.