何がずれるか

flex で横に並べるとき、既定でよく使うのは中央揃えです。

display: inline-flex;
align-items: center;

これは要素の箱を中央で揃えます。文字を揃えているわけではありません。

フォントサイズが違うと、行の高さも違います。中央で揃えると、小さいほうの文字が箱の中央に来るので、大きい文字の中心と一致します。

ところが、人間が「揃っている」と感じるのは、文字の下端（ベースライン）が一致しているときです。中央で揃えると、小さい文字が少し浮いて見えます。

差は 1px か 2px 程度です。それでも、並んでいると気になります。

baseline で揃える

対処は、その部分だけ揃え方を変えることです。

{/* サイズ違いのラベルを中央 (align-items: center) で並べると小さい文字が
    ベースライン差ぶん浮いて見えるため、文字はベースラインで揃える。 */}
<Box component="span" sx={{ display: 'inline-flex', alignItems: 'baseline', gap: 0.75 }}>
  {children}
</Box>

align-items: baseline は、文字のベースラインを揃えます。フォントサイズが違っても、下端が一致します。

ボタン全体の配置は中央のままで、文字を並べる内側の要素だけベースラインにしています。ボタンの中でラベルを中央に置きたいのと、ラベル同士を揃えたいのは別の話なので、階層を分けました。

アイコンだけは例外

このボタンには、文字ではなくアイコン（SVG）のラベルもあります。縦書きと横書きの切り替えがそれです。

SVG にはベースラインがありません。baseline で揃えると、要素の下端が文字のベースラインに合わせられて、沈んで見えます。

なので、アイコンのときだけ中央揃えに戻します。

sx={{
  display: 'inline-flex',
  alignItems: 'center',
  // アイコンラベル (SVG) はテキストベースラインを持たないため中央揃えに戻す
  ...(typeof option.label === 'string' ? {} : { alignSelf: 'center' }),
  …
}}

ラベルが文字列かどうかで判定しています。型で分岐できるので、追加の指定は要りません。

align-self を使っているのが要点です。親の align-items を変えずに、その要素だけ揃え方を変えられます。

揃え方を選ぶ基準

整理すると、こうなります。

文字同士を並べる → baseline
文字とアイコンを並べる → center
箱同士を並べる → center

「何を揃えたいのか」で決まります。文字の見た目を揃えたいなら、箱ではなく文字の基準線を使います。

flex の align-items は既定で stretch で、実務では center を書くことが多いです。ほとんどの場面ではそれで問題ありませんが、サイズの違う文字を並べるときだけは baseline を思い出す価値があります。

気づき方

この種のずれは、スクリーンショットを撮って拡大すると分かります。目視だと「なんとなく揃っていない」で終わってしまい、原因の特定に至りません。

拡大して、文字の下端に横線を引いてみると、ずれている量が見えます。そこまで確かめると、baseline にすればよいと分かります。

「なんとなく気持ち悪い」を放置しないためには、気持ち悪さを数値にする手段が要ります。1px か 2px かが分かれば、対処は自然に決まりました。

まとめ

align-items: center は箱を揃える。文字を揃えているわけではない
フォントサイズが違う文字を中央で揃えると、小さいほうが浮いて見える
文字同士を並べるなら align-items: baseline を使う
SVG にはベースラインが無いので、そこだけ align-self: center で戻す
ボタンの中の配置と、ラベル同士の揃え方は階層を分けて指定する
「なんとなく揃っていない」は拡大して数値で確かめる