Skip to content

feat: modernize Badge according to MD3 #4974

Description

@adrcotfas

The goal is to modernize the Badge component to the latest Material Design specs by reusing theme tokens (shape, typography, colors etc).

Current state

Badge

MD3 spec: Badges
Specs link: https://m3.material.io/components/badges/specs

Color tokens

  • Background error
  • Label text onError

Spacing / sizing

  • Default size is 20dp. MD3 defines small badge at 6dp (no label) and large badge at 16dp (with label)
  • No small/large distinction. Size should be determined automatically: 6dp when no children, 16dp when children are present
  • paddingHorizontal: 3. Spec requires 4dp between badge edge and text
  • fontSize = size * 0.5 yields 8sp at 16dp. Spec requires 11sp for large badge label text
  • Large badge max character count size (16x34dp) not handled; text currently overflows unconstrained

Behavior

  • No automatic small vs large variant. Component should render as a 6dp dot when childless and as a 16dp pill when a label is provided

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions