Designing with Sound
Principles for tasteful UI sound: when to play, when to stay silent, and how sensory-ui maps to Material sound guidance.
Sound should confirm, orient, and reassure. It should never just decorate. This guide distills Material's sound principles into practical rules for sensory-ui.
Principles
| Principle | What it means | sensory-ui rule |
|---|---|---|
| Purposeful | Every sound maps to a user action or system state | Only use the 17 defined sound roles: no one-off effects |
| Restrained | Less is more; silence is the default | Opt-in sound prop only. Leave low-value clicks silent (sound={false}) |
| Consistent | Same cause → same sound, everywhere | Reuse one role per interaction type (e.g. all primary submits use interaction.confirm) |
| Accessible | Sound enhances, never replaces, visual feedback | Every cue needs a visual equivalent; respect prefers-reduced-motion (see Accessibility) |
| Brief | UI sounds are milliseconds, not seconds | Interaction 8–50ms, navigation 40–250ms. Reserve hero.* (350–1900ms) for rare milestones |
Reference: About sound: principles, Sound attributes.
When to play sound
Based on Applying sound to UI: use cases:
| Use case | Play | Role | Example |
|---|---|---|---|
| Confirm an action | Yes | interaction.confirm | Form submit, Save |
| Toggle state | Yes | interaction.toggle | Switch, Checkbox |
| Open / close a surface | Yes | overlay.open / overlay.close | Dialog, Sheet |
| Move through space | Yes, quietly | navigation.forward / navigation.backward / navigation.tab | Pagination, Tabs |
| System feedback | Yes | notification.info / success / warning / error | Toasts, validation |
| Major achievement | Rarely | hero.complete / hero.milestone | Onboarding done, upload finished |
When to stay silent
- Rapid-fire clicks (sliders dragging continuously, use
interaction.subtlesparingly or silence) - Every keystroke in a text field
- Sounds on mount / without a user gesture (browsers suspend
AudioContextanyway) - Inside a modal that already played
overlay.open, don't stack a button tap on top - Inline text links
// Tasteful: one sound per user intent
<Button sound="interaction.confirm">Submit form</Button>
<Button sound={false} variant="link">Learn more</Button>Choosing a pack
All 9 sound packs share the same roles. Switching changes character, not meaning:
| Context | Packs to try first |
|---|---|
| Clean SaaS | aero (default), crisp, minimal |
| Warm / friendly | soft, organic |
| Playful | arcade, retro |
| Premium / delicate | glass |
| Bold / industrial | industrial |
Keep one pack per app. Preview packs with the pack switcher on any component demo.
Volume
Master default is 0.35. UI sound should sit in the background:
- Subtle feedback:
0.15–0.25 - Default:
0.30–0.40 - Demo / accessibility testing:
0.80–1.00
Per-component volume can only lower the ceiling, never raise it. See Configuration.
Putting it together
A settings dialog that follows every rule on this page:
<Dialog sound="overlay.open" closeSound="overlay.close">
<DialogContent>
<Switch sound="interaction.toggle">Email alerts</Switch>
<Button sound="interaction.confirm" volume={0.8}>
Save changes
</Button>
<Button variant="link" sound={false}>
Reset to defaults
</Button>
</DialogContent>
</Dialog>One paired surface sound, one toggle, one rewarded submit, one silent escape hatch. For multi-step flows with milestones, see Sound usage and the Timer + Confetti block.
Further reading
- About sound
- Applying sound to UI
- Sound attributes
- Sound choreography
- Sound usage: hierarchy, pairing, and anti-patterns