mui / mui/material-ui

[Button] small button text not vertically centered with Roboto

Open
#29,965 17 comments 7 reactions 1 assignee View on GitHub

@DiegoAndai is already working on this.

Since Sep 20, 2023.

design: material scope: button type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Current behavior 😯

The text inside of a button with size="small" is not centered vertically. This is especially obvious when used with an icon or a contained/outlined button.

Expected behavior 🤔

The text inside of a button with size="small" is centered vertically.

Steps to reproduce 🕹

Steps:

  1. Use <Button size="small">text</Button>
  2. Observe text
Context 🔦

Codesandbox link

Screenshots:
Medium (alignment ok)
medium

Small (text too high)
small

Your environment 🌎
`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.