refactor: modernize badge component to latest MD3 spec by MrMuzyk · Pull Request #5013 · callstack/react-native-paper

MrMuzyk · 2026-06-23T10:41:42Z

Motivation

Modernizes the Badge component to the latest MD3 spec by adopting theme tokens for shape, typography, and sizing.

Changes

Shape: borderRadius: size / 2 → cornerFull (9999) from src/theme/tokens/sys/shape
Typography: fontSize: size * 0.5 (8sp at default) → theme.fonts.labelSmall (11sp, letterSpacing 0.5, fontWeight 500)
Sizing: configurable size prop → fixed MD3 constants (6dp dot, 16dp pill)
Padding: paddingHorizontal: 3 → 4dp (MD3 spec)
Max width: unconstrained → 34dp max-width with overflow: hidden
Variant: now automatic — no children renders a 6dp dot, children renders a 16dp pill

Breaking change

The size prop has been removed.

// Before (v5)
<Badge size={6} />          // dot
<Badge size={20}>3</Badge>  // pill

// After (v6)
<Badge />        // dot — automatic
<Badge>3</Badge> // pill — automatic

Callsites updated

src/components/BottomNavigation/BottomNavigationBar.tsx
src/components/Drawer/DrawerCollapsedItem.tsx (+ removed unused badgeSize constant)
example/src/Examples/BadgeExample.tsx
example/src/DrawerItems.tsx

Related issue

#4974

Test plan

yarn typescript — clean
yarn lint — clean
yarn test — 737 passed (8 Badge tests: 4 snapshot + 4 behavioral)
Visual verification: dot badge renders as 6dp circle, pill badge at 16dp with correct typography, "999+" clips at 34dp

Adopt MD3 theme tokens for shape, typography, and sizing: - cornerFull (9999) replaces borderRadius: size / 2 - theme.fonts.labelSmall replaces fontSize: size * 0.5 (11sp, letterSpacing 0.5, fontWeight 500) - Fixed MD3 sizes: 6dp dot, 16dp pill, 4dp padding, 34dp max-width BREAKING CHANGE: size prop removed. Variant is now automatic — no children renders a 6dp dot, children renders a 16dp pill. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…actor/modrnize-badge-component

matkoson

src/components/Badge.tsx:22 @MrMuzyk is removing 'size' a breaking change? can we keep it as deprecated?

generated by an automated pr-review pipe, not written by a human. reply and tag the repo owner if it got something wrong.

…actor/modrnize-badge-component

satya164 · 2026-06-24T09:48:53Z

  /**
-   * Size of the `Badge`.
+   * @deprecated Size is determined automatically by MD3 variant (6dp dot / 16dp pill).
+   * This prop is ignored and will be removed in a future major release.
   */
  size?: number;


Please remove the prop. This will be a major version and we don't want to keep legacy implementations.

satya164 · 2026-06-24T09:53:55Z

 const Badge = ({
  children,
-  size = defaultSize,
+  size: _size,


What's the point of accepting this prop when it's not used

To avoid lint errors, it doesn't matter now anyway as we're scrapping it as originally planned

Copilot

Pull request overview

Modernizes the Badge component to align with updated Material Design 3 behavior by switching to theme tokens for shape/typography and making the dot vs pill variant automatic based on whether children is provided.

Changes:

Refactors Badge sizing/shape/typography to fixed MD3-aligned constants and uses cornerFull + theme.fonts.labelSmall.
Removes the size prop and updates callsites to rely on automatic dot (no children) vs pill (with children) rendering.
Updates and expands badge tests and snapshots to cover the new sizing behavior and max-width clipping.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/Badge.tsx	Implements MD3 sizing/typography/shape tokens and automatic dot vs pill behavior.
src/components/BottomNavigation/BottomNavigationBar.tsx	Updates badge rendering to remove the removed `size` prop usage.
src/components/Drawer/DrawerCollapsedItem.tsx	Updates badge rendering to remove the removed `size` prop usage and deletes a now-unused constant.
src/components/tests/Badge.test.tsx	Removes size-prop test and adds behavioral tests for dot vs pill sizing and clipping.
src/components/tests/snapshots/Badge.test.tsx.snap	Updates snapshots to match new MD3 badge styles.
src/components/tests/snapshots/BottomNavigation.test.tsx.snap	Updates snapshots to match new badge rendering in BottomNavigation.
example/src/Examples/BadgeExample.tsx	Updates example usage to rely on automatic dot vs pill behavior (no `size` prop).
example/src/DrawerItems.tsx	Updates example callsites to remove the removed `size` prop usage.

+ * The bagde is styled differently based on whether `children` is passed:
+ * - Small dot when it doesn't have `children` 
+ * - Larger pill when it has `children`


+            maxWidth: MAX_LARGE_WIDTH,
+            paddingHorizontal: LARGE_PADDING,
+            ...labelFont,
+            lineHeight: LARGE_SIZE / fontScale,
+          }),


satya164 · 2026-06-24T10:55:46Z

the positioning seems off. in MD screenshots I see the badge is positioned lower, and the small dot is positioned too high in the implementation currently

the pill can also be wider - the guidelines say it should fit 4 characters, but the text is getting ellipsized currently

MrMuzyk · 2026-06-24T10:57:57Z

Got it, will have a look again and get back with fixed version and some screenshots

MrMuzyk · 2026-06-25T10:19:41Z

I've corrected the examples, this is how it looks right now

satya164

thank!

MrMuzyk changed the title ~~refactor(badge): modernize to MD3 tokens, remove size prop~~ refactor: modernize to badge component; MD3 tokens, remove size prop Jun 23, 2026

MrMuzyk changed the title ~~refactor: modernize to badge component; MD3 tokens, remove size prop~~ refactor: modernize badge component; MD3 tokens, remove size prop Jun 23, 2026

MrMuzyk changed the title ~~refactor: modernize badge component; MD3 tokens, remove size prop~~ refactor: modernize badge component to latest MD3 spec Jun 23, 2026

MrMuzyk added 2 commits June 23, 2026 12:54

Merge branch 'main' of github.com:MrMuzyk/react-native-paper into ref…

f0663b0

…actor/modrnize-badge-component

fix: tests

b87037e

satya164 added the Contributor: Internal label Jun 23, 2026

MrMuzyk marked this pull request as ready for review June 23, 2026 13:06

matkoson reviewed Jun 24, 2026

View reviewed changes

Merge branch 'main' of github.com:MrMuzyk/react-native-paper into ref…

d06ee25

…actor/modrnize-badge-component

satya164 requested changes Jun 24, 2026

View reviewed changes

MrMuzyk force-pushed the refactor/modrnize-badge-component branch from 6d29f43 to d06ee25 Compare June 24, 2026 10:18

Update src/components/Badge.tsx

94fa87f

satya164 requested a review from Copilot June 24, 2026 10:37

Copilot started reviewing on behalf of satya164 June 24, 2026 10:38 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

MrMuzyk added 2 commits June 24, 2026 13:55

fix: font scaling

64ef9c4

fix: max width and example

e5b4213

MrMuzyk requested a review from satya164 June 25, 2026 10:29

refactor: migrate to reanimated

62201c6

satya164 approved these changes Jun 25, 2026

View reviewed changes

satya164 merged commit 641d956 into callstack:main Jun 25, 2026
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

refactor: modernize badge component to latest MD3 spec#5013

refactor: modernize badge component to latest MD3 spec#5013
satya164 merged 8 commits into
callstack:mainfrom
MrMuzyk:refactor/modrnize-badge-component

MrMuzyk commented Jun 23, 2026 •

edited

Loading

Uh oh!

matkoson left a comment

Uh oh!

satya164 Jun 24, 2026

Uh oh!

Uh oh!

satya164 Jun 24, 2026

Uh oh!

MrMuzyk Jun 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

satya164 commented Jun 24, 2026

Uh oh!

MrMuzyk commented Jun 24, 2026

Uh oh!

MrMuzyk commented Jun 25, 2026

Uh oh!

satya164 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

MrMuzyk commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Changes

Breaking change

Callsites updated

Related issue

Test plan

Uh oh!

matkoson left a comment

Choose a reason for hiding this comment

Uh oh!

satya164 Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

satya164 Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

MrMuzyk Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

satya164 commented Jun 24, 2026

Uh oh!

MrMuzyk commented Jun 24, 2026

Uh oh!

MrMuzyk commented Jun 25, 2026

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MrMuzyk commented Jun 23, 2026 •

edited

Loading