Pattern for laying out buttons

[ryankeairns]

Outcome from a Slack discussion on Aug 6, 2025:

Let's settle on the pattern we want to follow when laying out buttons next to one another (e.g. below a form)

Proposal

Add clearer docs and a code pattern for laying out buttons. Then, capture oddly-spaced (i.e. non-cormfing instances) as papercut issues (referring to the label used in the Kibana GH repo).

The questions we should address more clearly are:

• Do I use flush or no?
• What size is the gap?
• Should the min-width of button styles be the same?

I will venture a bet that people are a) not familiar with the flush prop (or when to use it) and b) they lay these out using EuiFlexGroup which has a default gap of 24px (gutterSize: l).

Before we change any code defaults, let's update the docs with the recommended way, share that out, and encourage people to create papercut issues.

Examples

From @jovana-andjelkovic