elastic / elastic/eui

[EuiButton][forms][EuiListGroupItem] Control radius (8px)

Open
#9,896 0 comments 0 reactions 1 assignee Claimed by @mgadewoll View on GitHub
visual refresh
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

Part of #9893

Depends on: #9894 (radii tokens) — [#9903](https://github.com/elastic/eui/pull/9903) adds `border.radius.control` (8px). Prefer basing this work on #9903 / after it merges; don’t invent a temporary 8px.

## Goal

Align interactive controls on the shared **control** radius (8px) so buttons, form inputs, and list items sit on one corner language.

## Decisions (locked)

- **`border.radius.control` (8px)** — no full pill
- Keep **flat fill** on buttons; no elevation/shadow on buttons

## Scope

### Already spiked ([#9905](https://github.com/elastic/eui/pull/9905))
- `EuiButton` / Empty / Icon → `euiTheme.border.radius.control`
- `EuiButtonGroup` → `border.radius.control`

### Design feedback (still to wire)
- **Form input controls** (`EuiFormControlLayout` / text fields and related inputs) → `border.radius.control`
- **`EuiListGroupItem`** → `border.radius.control`

## Out of scope / later

- One size of buttons/inputs (small) — epic open decision (#9893); not required here
- Quieter form **edges** (color / faux border) — #9897 (HOLD) / #9894
- Panel-tier radii (CallOut, Banner, MarkdownEditor, Panel) — #9895

## Implementation

- Spike: https://github.com/elastic/eui/pull/9905

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.