=== User Story===
As a reader, I can see a speaker icon next to the IPA markup, that allows me to hear the pronunciation.
== Considerations ==
- {T309412}
== Component Specification ==
| Assets | Dimensions |
| {F35385723} | {F35385725} |
== Primary States ==
| State | UI | Description | Status |
| Default | {F35385734} | See specs above. Quiet button-style with a smaller 16px icon to a better fit next to text on the page | {icon exclamation} |
| Hover | {F35385771} | Light background on hover (#F8F9F, base90) – similar to “quiet button” OOUI | {icon exclamation} |
| Active | {F35385775} | Quiet button becomes blue: background (#EAF3FF, Accent90) icon+label (#2A4B8D, Accent30) | {icon exclamation} |
== Secondary States ==
| State | UI | Description | Status |
| Loading | {F35385787} | After 2sec of waiting, circular progress indicator (#3366CC, Accent50) replaces the volume icon to indicate loading | {icon exclamation} |
| Error | {F35385790} | OOUI VolumeOff icon (#B32424, Red30) on darker background (#EAECF0, Base80) | {icon exclamation} |
| Error hover | {F35385793} | On hover, a popup describes the error and the button becomes Error Reload (see below) | {icon exclamation} |
| Error Reload | {F35385797} | OOUI Reload icon (#3366CC, Accent50) replaces VolumeOff icon | {icon exclamation} |
== Resources ==
[[ https://www.figma.com/file/KcCsC6v1W6FqNLrLM3fC54/IPA-Audio-Renderer?node-id=414%3A3371 | Figma Assets ]]
[[ https://www.figma.com/proto/KcCsC6v1W6FqNLrLM3fC54/IPA-Audio-Renderer?page-id=414%3A3847&node-id=414%3A3956&viewport=-3863%2C277%2C0.56&scaling=scale-down-width&starting-point-node-id=414%3A3859&hide-ui=1 | Figma Prototype ]]