Voice indicator

Voice input indicator visualizes audio input from the user.

Principles

Clear Feedback: The indicator provides immediate feedback to show the user the microphone is receiving input.

Consistent: All indicators should share a core visual language to be instantly recognizable.

Usage & Placement

The voice input indicator communicates whether the app is actively accessing the microphone. The indicator doesn't control the microphone.

Both contained and uncontained indicators can be used independently without any accompanying surface, like a card.

check_circle

Do

Use uncontained indicator on a card or button.

cancel

Don't

Use indicator with container on colored surface.

If displayed on a card

Align the voice input indicator to the vertical center if there are 1 or 2 content rows.

Anchor the voice input indicator to the top right corner of the card if there are 2 or more content rows.

check_circle

Do

Use the color to match the app's primary brand color.

check_circle

Warning

Use red for voice input indicator, which is reserved for system-level warning, unless the branding color is red.

Anatomy

Voice indicator with container and without container

Customization

The voice indicator container and color can be customized depending on placement and branding.