elastic / elastic/eui

[EuiButtonGroup] Better differentiate the current selection

Open
#6,819 11 comments 0 reactions 0 assignees View on GitHub
design decision low hanging fruit stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Is your feature request related to a problem? Please describe.**
[internal feedback] I cannot tell with confidence which value is actually selected by looking at this unless I click and make the selection. But I just want to know what's selected, not change it.

**Describe the solution you'd like**
Can I suggest to make the selected item have more differentiation, perhaps an outline in addition to darker colouring. (this is one example to highlight).

### Proposed redesign
Screen Shot 2023-06-22 at 8 53 03 AM

-----

**Additional context**
This is particularly problematic when only two options are presented (see below):

![image (20)](https://github.com/elastic/eui/assets/446285/a577afd6-7d3b-4fc6-b16a-778542b6cbee)

For reference, we apply margin around the currently active option in the `compressed` version of this input. Perhaps we can apply a similar style to the default size `EuiButtonGroup`, as well.

![Screen Shot 2023-05-26 at 7 18 37 AM](https://github.com/elastic/eui/assets/446285/2107a35b-9c52-46ec-b011-2b7e15638533)

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.