[EuiButton][EuiButtonEmpty] Update button paddings by mgadewoll · Pull Request #8948 · elastic/eui

mgadewoll · 2025-08-06T16:41:14Z

Summary

Important

This PR merges into a feature branch.

closes https://github.com/elastic/platform-ux-team/issues/749

This PR updates paddings of button components according to design specifications.

Changes

updated outer paddings of buttons (anything that uses EuiButtonDisplay internally)
- size m -> 12px padding
- size s -> 8px padding
- size xs -> 6px padding
updated inner padding between button content to 4px and 2px (xs buttons)
added additional 4px padding on button text content (string content only)
updated usages of buttons (those are generally EuiButtonEmpty and EuiButtonIcon) inside form append/prepend to align with the expected padding and sizing
updated EuiFilterButton padding between content to 4px to align with base buttons

Important

The changes to button padding affect their usage visually in form append/prepend elements.
There is an additional issue to implement the new, stricter API for single-content/action API for append/prepend usages which will replace custom input in the future and ensure a more cohesive look.
With this following update we generally want to start a migration of append/prepend usages and we'll stop advertising custom content usages.

Deployment

The changes have been deployed here:

Why are we making this change?

Implementing a design change to balance spacing in buttons with different content (icons, text etc) and align paddings across different usages (e.g. buttons and form append/prepend).

Screenshots #

EuiButton

before	after

Screen.Recording.2025-08-06.at.18.39.51.mov

EuiFilterButton

Screen.Recording.2025-08-06.at.17.06.41.mov

usages in append/prepend on EuiFormControlLayout

before	after

Screen.Recording.2025-08-07.at.14.17.29.mov

Impact to users

⚠️ There are no changes needed on consumer side but the updates have a visual effect due to spacing changes.
Consumer implementations should be reviewed to find potential visual issues.

QA

Stories:

Steps:

review the button padding changes and verify that the expected padding is applied
smoke-test button-related components and/or check the VRT updates and verify there are no unexpected regressions
verify that there are no regressions for Amsterdam

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- adds additional 4px padding on text content and adjusts button padding per size

…usage

ek-so · 2025-08-07T11:18:24Z

Hey @mgadewoll, thank you! The changes look good, one ask please — could we adjust the text box for empty XS buttons to be 2px rather than 4px?

mgadewoll · 2025-08-07T13:02:40Z

Hey @mgadewoll, thank you! The changes look good, one ask please — could we adjust the text box for empty XS buttons to be 2px rather than 4px?

@ek-so Sure 👍 The label has now 2px padding for xs buttons.

Screen.Recording.2025-08-07.at.14.13.30.mov

acstll

I strictly followed the suggested steps for QA (thanks for providing those!) and it's all looking good.

I only left 2 remarks, only one may require action, which is a possible Amsterdam regression

Amsterdam: padding for text content is there but it wasn't before (I think I spotted the place in the code)
[no action] the layout in EuiSearchBar / EuiSearchBarFilters gets weird in small viewports but I don't think it matters

Screenshots

`4px` inline padding for text content in Amsterdam

production

PR

weird layout for EuiSearchBar…

packages/eui/src/components/button/button_display/_button_display_content.styles.ts

acstll · 2025-08-28T16:58:13Z

packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts

      })
    ),
    uncompressed: `
+      &:not(:has(> ${buttons}:first-child, > *:first-child > ${buttons})) {


[no action required] this caught my attention, probably because of the complexity, but I think it was there already higher up in the file, so I wouldn't touch and I also don't think it's actually bad

Yeah, that's been around already. Since the form layout API allows to pass anything (e.g. buttons) currently, this is how some styles are selectively targeted.

mgadewoll · 2025-09-01T08:36:40Z

[no action] the layout in EuiSearchBar / EuiSearchBarFilters gets weird in small viewports but I don't think it matters

Yeah, this is expected as is currently. The filters wrap in a flex layout and the width changes due to the content padding.

elasticmachine · 2025-09-01T08:54:56Z

💚 Build Succeeded

History

💚 Build #1043 succeeded 0efc86f
💚 Build #1042 succeeded feb43b3
💚 Build #1037 succeeded a2428d1
💚 Build #1036 succeeded 17f17b5
💚 Build #1019 succeeded ff31b48

cc @mgadewoll

elasticmachine · 2025-09-01T09:05:50Z

💚 Build Succeeded

Buildkite Build
Commit: c68f542

History

💚 Build #4571 succeeded 0efc86f
💔 Build #4570 failed feb43b3
💚 Build #4566 succeeded a2428d1
💚 Build #4565 succeeded 17f17b5
💔 Build #4555 failed ff31b48

cc @mgadewoll

acstll

🟢 Thanks for the clarifications and the update, looks good to merge!

## Dependency updates - `@elastic/eui` - v112.3.0 ⏩ v113.0.0 - `@elastic/eui-theme-borealis` - v5.4.0 ⏩ v6.0.0 - `@elastic/eslint-plugin-eui` - v2.8.0 ⏩ v2.9.0 --- ## Changes 1. EUI component update: API and Design updates to form layout append/prepend by using the new components `EuiFormPrepend` and `EuiFormAppend` (EUI [#9308](elastic/eui#9308)) >[!important] ❗ This upgrade PR includes all changes previously made in the specific QA PR #248805. Please see the description in that PR for detailed information about the specific changes. 2. Additional changes related to the form layout changes >[!note] 🔗 Please see the [section "Additional changes"](#248805 (comment)) in #248805 for an overview of additional changes. 3. Removed token update: Replaced `ghost` and `ink` token usages with `textInk` or `plainDark` and `textGhost` or `plainLight` respectively (EUI [#9379](elastic/eui#9379)) ## Package updates ### `@elastic/eui` [v113.0.0](https://github.com/elastic/eui/releases/tag/v113.0.0) - Updated `EuiFlyout` manager to close all flyouts when a parent flyout is closed. ([#9378](elastic/eui#9378)) - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) - Added `EuiFormAppend` and `EuiFormPrepend` components ([#9014](elastic/eui#9014)) - Added support for `type="span"` on `EuiFormLabel` for visual-only form labels ([#9014](elastic/eui#9014)) - Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed ([#9014](elastic/eui#9014)) - Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiFormAppend`/`EuiFormPrepend` styling ([#9305](elastic/eui#9305)) - Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Updated `EuiFormControlLayout` hover, disabled and readonly styling ([#9305](elastic/eui#9305)) - Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Added `iconSide` prop on `EuiDatePickerRange` ([#9305](elastic/eui#9305)) - Updated `EuiSuperDatePicker` valid state styling ([#9305](elastic/eui#9305)) - Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either) ([#9305](elastic/eui#9305)) - Added `isLoading` prop on `EuiFormControlButton` ([#9328](elastic/eui#9328)) - Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` ([#8948](elastic/eui#8948)) - Updated paddings for `append`/`prepend` on `EuiFormControlLayout` ([#8948](elastic/eui#8948)) - Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. ([#9373](elastic/eui#9373)) **Bug fixes** - Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` ([#9014](elastic/eui#9014)) **Breaking changes** - Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases. ([#9379](elastic/eui#9379)) - Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. ([#9014](elastic/eui#9014)) - Removed `components.superDatePickerBackgroundSuccees` token ([#9305](elastic/eui#9305)) ### `@elastic/eui-theme-borealis` v6.0.0 - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) ### `@elastic/eslint-plugin-eui` v2.9.0 - Prevented `badge-accessibility-rules` rule autofix from duplicating `aria-hidden` attributes. ([#9366](elastic/eui#9366)) - Skip `badge-accessibility-rules` rule validation when a spread operator is used in a component. ([#9366](elastic/eui#9366)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll added 2 commits August 6, 2025 18:03

refactor: update button spacing

31ad679

- adds additional 4px padding on text content and adjusts button padding per size

refactor(formControlLayout): adjust button padding in append/prepend …

1937967

…usage

mgadewoll requested a review from ek-so August 6, 2025 16:41

mgadewoll self-assigned this Aug 6, 2025

mgadewoll added the visual refresh label Aug 6, 2025

mgadewoll added 2 commits August 7, 2025 09:17

test: update snapshots

5bf2d00

test(vrt): update reference images

17f17b5

mgadewoll force-pushed the button/749-update-paddings branch from ff31b48 to 17f17b5 Compare August 7, 2025 07:18

chore: add changelog

a2428d1

mgadewoll marked this pull request as ready for review August 7, 2025 08:06

mgadewoll requested a review from a team as a code owner August 7, 2025 08:06

ek-so approved these changes Aug 7, 2025 •

edited

Loading

View reviewed changes

refactor: make additional button label padding size-related

55fd097

mgadewoll added 2 commits August 7, 2025 15:03

test: update snapshots

a2dbdb1

test(vrt) update reference images

0efc86f

mgadewoll force-pushed the button/749-update-paddings branch from feb43b3 to 0efc86f Compare August 7, 2025 13:03

acstll self-requested a review August 25, 2025 08:57

acstll requested changes Aug 28, 2025

View reviewed changes

refactor: ensure button content padding is tied to the refresh variant

c68f542

acstll self-requested a review September 1, 2025 10:22

acstll approved these changes Sep 1, 2025

View reviewed changes

mgadewoll merged commit 5c0a7fc into elastic:feat/visual-refresh-append-prepend-updates Sep 1, 2025
4 checks passed

mgadewoll added a commit that referenced this pull request Sep 1, 2025

[EuiButton][EuiButtonEmpty] Update button paddings (#8948)

b5b2d61

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Dec 12, 2025

[EuiButton][EuiButtonEmpty] Update button paddings (elastic#8948)

4724513

mgadewoll mentioned this pull request Dec 12, 2025

[Visual Refresh] Update form layout append/prepend API #9014

Merged

21 tasks

mgadewoll added a commit that referenced this pull request Dec 15, 2025

[EuiButton][EuiButtonEmpty] Update button paddings (#8948)

25e23a7

mgadewoll added a commit that referenced this pull request Jan 5, 2026

[EuiButton][EuiButtonEmpty] Update button paddings (#8948)

64c6afc

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Jan 5, 2026

[EuiButton][EuiButtonEmpty] Update button paddings (elastic#8948)

6ab2419

mgadewoll mentioned this pull request Jan 12, 2026

[Inputs] Append/Prepend API and design updates #9308

Merged

16 tasks

ElenaStoeva mentioned this pull request Jan 28, 2026

Visual Refresh - Form append/prepend elastic/kibana#250802

Closed

mgadewoll added a commit that referenced this pull request Feb 11, 2026

[EuiButton][EuiButtonEmpty] Update button paddings (#8948)

265b0d6

mgadewoll added a commit that referenced this pull request Feb 13, 2026

[EuiButton][EuiButtonEmpty] Update button paddings (#8948)

edc99b5

mgadewoll mentioned this pull request Feb 16, 2026

Upgrade EUI to v113.0.0 elastic/kibana#253286

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiButton][EuiButtonEmpty] Update button paddings#8948

[EuiButton][EuiButtonEmpty] Update button paddings#8948
mgadewoll merged 9 commits intoelastic:feat/visual-refresh-append-prepend-updatesfrom
mgadewoll:button/749-update-paddings

mgadewoll commented Aug 6, 2025 •

edited

Loading

Uh oh!

ek-so commented Aug 7, 2025

Uh oh!

mgadewoll commented Aug 7, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

acstll Aug 28, 2025

Uh oh!

mgadewoll Sep 1, 2025

Uh oh!

mgadewoll commented Sep 1, 2025

Uh oh!

elasticmachine commented Sep 1, 2025

Uh oh!

elasticmachine commented Sep 1, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

mgadewoll commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Deployment

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

ek-so commented Aug 7, 2025

Uh oh!

Uh oh!

mgadewoll commented Aug 7, 2025

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

4px inline padding for text content in Amsterdam

production

PR

weird layout for EuiSearchBar…

Uh oh!

Uh oh!

acstll Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Sep 1, 2025

Uh oh!

elasticmachine commented Sep 1, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 1, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mgadewoll commented Aug 6, 2025 •

edited

Loading

`4px` inline padding for text content in Amsterdam