Skip to content

Make button height independent from state and content#296

Merged
devmount merged 3 commits into
mainfrom
bugs/287-inconsistent-button-height
Jun 26, 2026
Merged

Make button height independent from state and content#296
devmount merged 3 commits into
mainfrom
bugs/287-inconsistent-button-height

Conversation

@devmount

Copy link
Copy Markdown
Collaborator

What changed?

This change introduces a fixed height for buttons and eliminates the top and bottom padding, making their height independent from states and content height.

For example having different sized icons now results in buttons with the same height:
image

The same goes for buttons using borders (outline variant) or gradient outlines (brand buttons) in combination with disabled state.

Why?

Visual consistency.

Limitations and Notes

This change won't let buttons grow in height with their contents anymore. We never explicitly supported that, but if somebody used "oversized" buttons, this change would reduce their buttons to the standard button height again.

Applicable Issues

Closes #287

Comment on lines +32 to +33
disabled: false,
forceTooltip: false,

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

This is for storybook providing a boolean toggle:

Image

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for adding these!

Comment thread src/components/BaseButton.vue
Comment thread src/components/BaseButton.vue

@davinotdavid davinotdavid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

lgtm! thank you! 🎉

@devmount devmount merged commit d9082f2 into main Jun 26, 2026
3 checks passed
@devmount devmount deleted the bugs/287-inconsistent-button-height branch June 26, 2026 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button grows by 1 pixel when in disabled state

2 participants