google / google/material-design-lite

material spec: ripple size on icon buttons

Open
#1,869 4 comments 0 reactions 0 assignees View on GitHub
Button MD Alignment Ripple
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

MDL uses very strange values for ripple size within icon button. I've inspected other Material based frameworks and they use all the same values for it. MDL icon button ripples so small so from time to time I've asked myself "What's that?" and "Why it here?".
Though, official guidance has no any word about ripple size, I've created this picture based on "Icon toggles" guidance and the values I got while inspecting MDL and other Material based frameworks.

![](https://camo.githubusercontent.com/dbbd88d83d07f00daf73eb7498a6b8cc781d0ac1/68747470733a2f2f70702e766b2e6d652f633632323431382f763632323431383337302f35363763332f4959682d627942456a75632e6a7067)

Blue rect - 24px by 24px, the canonical size of icon in Material Design.
Red rect - 32px by 32px, the size of icon button ripple in MDL.
Green rect - 48px by 48px, the real size for ripple in official docs and all other frameworks.

So, here's the question: Why don't you use normal (big, real, whatever) size of ripple? It's looks and feels more natural.

---

originally from #1864

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.