Skip to content

Button: add min-width and min-height#637

Merged
mkernohanbc merged 4 commits intomainfrom
633-button-min-width
Mar 10, 2026
Merged

Button: add min-width and min-height#637
mkernohanbc merged 4 commits intomainfrom
633-button-min-width

Conversation

@mkernohanbc
Copy link
Copy Markdown
Contributor

This PR addresses the issue identified by @ty2k in #633. With the introduction of the xsmall button variant in 0.5.2, we inadvertently made it possible to violate WCAG SC 2.5.8. An xsmall button with a single-character label fails to meet the minimum target size:

Screenshot 2026-02-18 at 11 33 05 AM

This change resolves this by setting min-width and min-height at the top level of the component. It also cleans up some inconsistency/duplication in various rules.

@mkernohanbc mkernohanbc added this to the Components v0.7.0 milestone Feb 20, 2026
@mkernohanbc mkernohanbc self-assigned this Feb 20, 2026
@mkernohanbc mkernohanbc added the Components Changes or issues affect the design-system-react-components package label Feb 20, 2026
@mkernohanbc mkernohanbc linked an issue Feb 20, 2026 that may be closed by this pull request
@mkernohanbc mkernohanbc requested a review from ty2k February 20, 2026 18:54
@mkernohanbc mkernohanbc marked this pull request as draft February 20, 2026 18:55
@mkernohanbc mkernohanbc removed the request for review from ty2k February 20, 2026 18:55
@mkernohanbc mkernohanbc marked this pull request as ready for review February 20, 2026 19:13
@mkernohanbc mkernohanbc requested a review from ty2k February 20, 2026 19:15
Copy link
Copy Markdown
Contributor

@ty2k ty2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice this totally solves the touch target accessibility piece for size: xsmall buttons! ✅

A couple minor CSS requests below.

Comment thread packages/react-components/src/components/Button/Button.css Outdated
Comment thread packages/react-components/src/components/Button/Button.css Outdated
@mkernohanbc mkernohanbc requested a review from ty2k March 10, 2026 16:21
Copy link
Copy Markdown
Contributor

@ty2k ty2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚀

@mkernohanbc mkernohanbc merged commit 97118ba into main Mar 10, 2026
5 checks passed
@mkernohanbc mkernohanbc deleted the 633-button-min-width branch March 10, 2026 17:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Components Changes or issues affect the design-system-react-components package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button component has no min-width - should it?

2 participants