**Context**

The meeting outcomes feature (mis)uses a Primer Figma component called 'StateLabel' to indicate meeting status: ##57799

However, this doesn't exist in the Rails version. The existing 'State' and 'Label' components are insufficiently flexible for use in Meetings. One solution is to create a new OP-Primer component to fill this need.

**Acceptance criteria**

* Create an OP-Primer component called Begin of the insertion'Status Button'End of the insertion Begin of the deletion 'Meeting status'End of the deletion consisting of:

* Size:

* Small

* Medium

* (optional) Leading icon of the selected option

* State name

* (optional) Dropdown icon

* Individual statuses have:

* a name

* a background colour

* (optional) Icon

* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion list of statuses isn't described at component level. This has to be done at either Begin of the insertionat:~~End of the insertion Begin of the deletion at:End of the deletion

* Begin of the insertion~~AEnd of the insertion Begin of the deletion AEnd of the deletion feature level for Meeting statuses (since these are Begin of the insertionfixed)~~End of the insertion Begin of the deletion fixed)End of the deletion

* Begin of the insertion~~AnEnd of the insertion Begin of the deletion AnEnd of the deletion admin level for work packages statuses (since they can be Begin of the insertioncustomised)~~End of the insertion Begin of the deletion customised)End of the deletion

* If the component is a dropdown, clicking on it displays all available statuses and lets you switch between them

* Certain options need to show a locked icon (locked statuses or ones that are not available)


**Open question**

* If we extend the scope so we also have a 'size' option (medium and large), couldn't we possibly use the smaller one for Work package status eventually?


**Uses**

* Meeting status

* Work package status?


**To do**

* [x] Define component
* [x] Create Figma component
* [ ] Finalise specs 
* [ ] Write Lookbook docs
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Implement component
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Add code examples and technical notes to Lookbook
* [ ] Use component in the Meetings module (in ##57799)

**Figma component**

[https://www.figma.com/design/4M3DM3qjjtXFMzTmOzUlke/Primer-OP-(Internal)?node-id=100-106&t=Q4nnVUI4AsygXzab-4](https://www.figma.com/design/4M3DM3qjjtXFMzTmOzUlke/Primer-OP-\(Internal\)?node-id=100-106&t=Q4nnVUI4AsygXzab-4)

**Visual**

**Suggested implementation**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:592px;" src="/api/v3/attachments/328643/content">

<br>

Current Primer implementation (without dropdown)

<img class="image_resized op-uc-image op-uc-image_inline" style="width:472px;" src="/api/v3/attachments/326997/content">