Material 3 Components

The compose-material3 module provides ready-to-use Material 3 components that wrap RecorderState and PlayerState from the compose module.

Add the dependency

implementation(libs.kodio.compose.material3)

implementation("space.kodio.extensions:compose-material3:0.2.0")

You also need the compose module for rememberRecorderState() and rememberPlayerState().

RecordAudioButton

A recording button with optional live waveform, permission handling, and error dialog:

val recorderState = rememberRecorderState()

RecordAudioButton(
    state = recorderState,
    showWaveform = true,
)

When state.needsPermission is true, the button shows AudioPermissionButton instead of the record toggle. When state.error is set, an ErrorDialog is shown automatically.

The toggle button shows:

Microphone icon when idle
Stop icon while recording
Loading indicator while processing

PlayAudioButton

A playback button for a specific AudioRecording:

val playerState = rememberPlayerState(recording)

PlayAudioButton(
    recording = recording,
    state = playerState,
)

The button shows:

Play icon when ready or stopped
Stop icon while playing (acts as pause toggle via state.toggle())
Loading indicator while loading
A restart button when playing, paused, or finished

Errors are shown via ErrorDialog when state.error is set.

AudioPermissionButton

An icon button that reflects microphone permission state and requests access when needed:

val recorderState = rememberRecorderState()

AudioPermissionButton(state = recorderState)

This is used internally by RecordAudioButton when permission is required. You can also use it standalone in custom layouts.

ErrorDialog

A Material 3 dialog for displaying an AudioError:

recorderState.error?.let { error ->
    ErrorDialog(
        error = error,
        onDismiss = { recorderState.clearError() }
    )
}

RecordAudioButton and PlayAudioButton show this dialog automatically when their state has an error.

Complete example

Full recording UI using shared state holders:

@Composable
fun MaterialAudioUI() {
    val recorderState = rememberRecorderState()
    val recording = recorderState.recording

    Column(
        modifier = Modifier.fillMaxWidth().padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        RecordAudioButton(state = recorderState)

        if (recording != null) {
            PlayAudioButton(
                recording = recording,
                state = rememberPlayerState(recording),
            )
        }
    }
}

Component reference

Component	Signature	Purpose
`RecordAudioButton`	`(modifier?, state?, showWaveform?)`	Recording toggle with optional waveform and permission flow
`PlayAudioButton`	`(recording, modifier?, state?, showWaveform?)`	Playback controls for one recording
`AudioPermissionButton`	`(state, modifier?)`	Permission request button
`ErrorDialog`	`(error, onDismiss)`	Display an `AudioError`

Last modified: 03 July 2026