Skip to content

Instantly share code, notes, and snippets.

@bmsterling-dandy

bmsterling-dandy/UI element keys and size values.md

Created June 5, 2025 15:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bmsterling-dandy/85877aa7dc638c88b62f56b4c8dab678 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bmsterling-dandy/85877aa7dc638c88b62f56b4c8dab678 to your computer and use it in GitHub Desktop.
Download ZIP
UI element keys and size values
Raw
UI element keys and size values.md

An object of UI element keys and size values (strings)

Below is a table to show the equivalent values from px to rem for UI element sizes. This is based on the default browser font size which is 16px.

UI Element Min Height (px/rem) Max Height (px/rem) Min Width (px/rem) Max Width (px/rem) Notes Sources
Button 36px / 2.25rem 56px / 3.5rem 64px / 4rem 300px / 18.75rem 44x44px (2.75x2.75rem) touch target; 8-16px padding. Material Design (Buttons), Apple HIG (Buttons), WCAG 2.1 (Target Size)
Text Input 32px / 2rem 56px / 3.5rem 120px / 7.5rem 600px / 37.5rem 12-16px padding; align with 1rem base font. Material Design (Text Fields), Apple HIG (Text Fields), WCAG 2.1
Checkbox/Radio 16px / 1rem 48px / 3rem 16px / 1rem 48px / 3rem 44x44px (2.75x2.75rem) touch target; 8px label spacing. Material Design (Selection Controls), Apple HIG (Controls), WCAG 2.1
Card 100px / 6.25rem content-driven 100px / 6.25rem 1200px / 75rem Min 200px (12.5rem) for content-heavy cards; 8-16px padding. Material Design (Cards), Bootstrap (Cards), Apple HIG (Views)
Modal 200px / 12.5rem 90vh 280px / 17.5rem 90vw / 75rem 560px (35rem) optimal width for desktop; 80% viewport height. Material Design (Dialogs), Apple HIG (Modals), WCAG 2.1
Dropdown 32px / 2rem 48px / 3rem 120px / 7.5rem 600px / 37.5rem 44x44px (2.75x2.75rem) touch target for options; max 400px height. Material Design (Menus), Apple HIG (Menus), WCAG 2.1
Tooltip 24px / 1.5rem 100px / 6.25rem 60px / 3.75rem 320px / 20rem 8-12px padding; 14px (0.875rem) min font size for readability. Material Design (Tooltips), Apple HIG (Popovers), WCAG 2.1 (Text Size)
Slider 24px / 1.5rem 48px / 3rem 100px / 6.25rem 600px / 37.5rem 24x24px (1.5x1.5rem) thumb with 44x44px (2.75x2.75rem) touch target. Material Design (Sliders), Apple HIG (Sliders), WCAG 2.1 (Target Size)
Toggle 24px / 1.5rem 48px / 3rem 36px / 2.25rem 60px / 3.75rem 44x44px (2.75x2.75rem) touch target; 8px padding. Material Design (Switches), Apple HIG (Toggles), WCAG 2.1 (Target Size)
Progress Bar 4px / 0.25rem 16px / 1rem 100px / 6.25rem 600px / 37.5rem 8px (0.5rem) height for visibility; full-width for loading bars. Material Design (Progress Indicators), Bootstrap (Progress), Apple HIG
Tabs 32px / 2rem 48px / 3rem 72px / 4.5rem 240px / 15rem 44x44px (2.75x2.75rem) touch target; 8-12px padding per tab. Material Design (Tabs), Apple HIG (Tab Bars), WCAG 2.1 (Target Size)
Icon 24px / 1.5rem 48px / 3rem 24px / 1.5rem 48px / 3rem 44x44px (2.75x2.75rem) touch target; 8px padding for standalone icons. Material Design (Icons), Apple HIG (SF Symbols), WCAG 2.1 (Target Size)
@dandy-rv
Copy link
Copy Markdown

dandy-rv commented Jun 5, 2025

These mostly look good, a few suggestions:

  1. I think we need variants for buttons - a medium and small size would be preferred -> Medium at 40px height and Small at 28px height
  2. Same with inputs - I'd prefer inputs and buttons be the same size(s), including selects/dropdowns
  3. Textarea I think we should split out into it's own component? It needs to be bigger - 120px height is what I've been using
  4. Tabs I think we need two kinds: 1 with horizontal padding, and 1 without horizontal padding -> They both have their purposes
  5. Icon we also need at least one more size: 16x16 -> Used a lot in tables for example

Rest look good to me for now

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