Skip to content

refactor(button): improve MD3 compliance and modernize content API #4928

Description

@ruben-rebelo

Refactor Button to improve Material Design 3 compliance, remove problematic children patterns, improve performance characteristics, and modernize the public API.

Problems

  • Current API relies heavily on children composition in ways that are difficult to optimize
  • Internal layout logic is tightly coupled to arbitrary child structures
  • MD3 behaviors and visuals are not fully aligned with current Material guidelines
  • Rendering performance can degrade in large lists or frequently updated screens
  • Type safety and discoverability of the API can be improved
  • The component has inconsistent behavior between platforms and edge cases

Focus Areas

  • Remove implicit text child handling
  • Improve icon + label composition
  • Standardize loading and disabled states
  • Improve ripple and state layer behavior
  • Reduce nested render structure
  • Improve accessibility semantics

Proposed API Direction

Instead of:

<Button icon="plus">Create</Button>

Prefer:

<Button label="Create" icon="plus" />

Performance Opportunities

  • Memoize content container
  • Avoid cloning children
  • Reduce dynamic style allocations
  • Optimize ripple rendering

Activity

  1. self-assigned this
    on May 11, 2026
  2. adrcotfas commented on May 13, 2026

    @adrcotfas
    Collaborator

    It's a good opportunity to implement the expressive specs too like size, shape, color, toggle: https://m3.material.io/components/buttons/specs

  3. adrcotfas commented on May 15, 2026

    @adrcotfas
    Collaborator

    Important

    See #4949 for more details

  4. RichardLindhout commented on May 21, 2026

    @RichardLindhout
    Contributor

    Children change is stupid IMHO. Why such a breaking change which is also uglier IMHO. You can check if it's a string maybe? And warn users?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions