## Background
====Description:
A group of regular Buttons or ToggleButtons. A ButtonGroup can be multi-select or single-select.
====History:
Commonly used component that exists in OOUI and is documented in the Design Style Guide; see links below.
====Known use case(s):
**GrowthExperiments - note:**
- Current {F35267782}
- Proposed revision is removing this component and replacing with a single dropdown {F35268163} - see T311228 for details reasons.
**Recent Changes:**
{F35240562}
**WikiLambda:**
Currently need a group of regular buttons with mutually-exclusive actions. Multiselect would be nice in the future.
{F35222230}
**Function Page:**
Selectable button group with quiet buttons will be needed to create the [[ https://www.figma.com/file/Ua4GgINVxdQYtjmXkZnWBO/Function-page?node-id=119%3A1521 | table pagination ]]:
{F35280900}
====Considerations:**
- Any changes to the Button component will also impact ButtonGroup, e.g. {T305437}
- OOUI has ButtonGroupWidget, which is just a group of Buttons or ToggleButtons. There is also ButtonSelectWidget, which has several Button or ToggleButton options that are mutually exclusive.
### User stories
- As a designer/developer I need to create group of **clickable buttons** to use them as group of actions in my projects.
- As a designer/developer I need to create group of **selectable buttons** to filter information in my projects.
### Previous implementations
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
- **Design style guide:** see [[ https://design.wikimedia.org/style-guide/components/button-groups.html | Button groups ]]
- **OOUI:** see [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-button-sets | "button sets" section ]], [[ https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/?node-id=2549%3A57467 | Figma spec ]]
- **Vue:** [[ https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/tree/master/app/src/lib/mediawiki.ui/components/MWButtonGroup | ContentTranslation ]]
---
## Codex implementation
### Component task owners
- Designer: @bmartinezcalvo
- Developer: @Catrope (temporarily @AnneT)
### Design spec
| [[ https://www.figma.com/file/WWSRecnFf7PRQLN0LP08gT/ButtonGroup---T306025?node-id=111%3A167 | Component spec sheet here ]] |
---
## Stage 1: Minimum viable product (MVP)
MVP includes basic layout, default states, and most important functionality.
### Acceptance criteria
- [-] Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
- [-] Design MVP spec sheet. Once complete, assign task to developer.
- [] Implement MVP
---
## Stage 2: Additional states, features, and variants
This might include a disabled state, framed/frameless designs, transitions, supporting different use cases, etc., which will be captured in separate subtasks.
### Acceptance criteria
- [] Document design and implementation of additional states and features in individual subtasks
- [] Complete each additional state/feature subtask
---
## Stage 3: Refinement
This stage includes any final touches or bug fixes needed before the component can be deemed complete, which will be captured in separate subtasks.
### Acceptance criteria
- [] Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work
- [] Meet accessibility standards: open and complete a subtask for any necessary accessibility improvements
- [] Meet internationalization standards: open and complete a subtask to fix any i18n bugs
- [] Complete testing: open and complete a subtask for any additional unit or functional tests that are needed