### Summary
The mediawiki.ui button increases its padding on small screens when the button is icon-only (i.e. has no visible text, just an icon), in order to make the touch area larger. See [[ https://phabricator.wikimedia.org/T314323#8234735 | this comment ]] for details. Larger buttons on mobile is an established accessibility standard that should be part of the Codex system.
In order to support use of the Codex Button component in Vector and MinervaNeue, and to meet accessibility standards for other uses buttons on moible, we should consider providing a way to support this behavior in Codex.
### Considerations
- We could increase the size of all buttons on mobile viewports. This has cascading effects, though: if the button inside a Combobox increases in both height and width, the height of the input must also increase to match it. If the Combobox is now bigger on mobile, so should other form inputs be.
- We could create a prop for button called `largeOnMobile` that increases button padding only on mobile viewports. But this is very prescriptive and doesn't well-define the larger button size
- We could create a `size` prop that includes medium (the current size) and large (44px minimum). This would open up usage of large buttons everywhere, which we may not want for consistency's sake.
### Solution
In order to limit the scope and complexity of this change, the DST has decided to do the following now:
- Add a `size` prop to Button. It will allow 2 values: 'medium' (default) and 'large'
- 'large' will add a CSS class (that can also be used for the CSS-only button) that will increase minimum height to 44px. This will also increase horizontal padding, at least for icon-only buttons
- Document intended use of the 'large' size, which is really meant for improving accessibility and not increasing the visual weight of a button
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
| Component spec sheet |
Related {T328628}
---
=== Acceptance criteria
- [x] Evaluate whether to support increased padding for icon-only buttons on small screens in Codex
- [x] Determine implementation
- [] Define the exact behavior in the design spec
- [] Add new component design tokens for the different button padding values
- [] Implement the changes in the Button component (Vue and CSS-only)
- [] Document usage guidelines