# SpeedSettingsButton

`SpeedSettingsButton` renders a small bordered button displaying the current playback speed (e.g., "x1.0", "x1.5", "x2.0"). It is used in audio and video playback controls to allow users to cycle through playback rates.

## Usage

```tsx
import { SpeedSettingsButton } from "stream-chat-react-native";

<SpeedSettingsButton
  currentPlaybackRate={1.5}
  onPress={() => cyclePlaybackRate()}
/>;
```

## Props

| Prop                             | Description                                                                                                                                                                                      | Type                   |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- |
| `currentPlaybackRate` (required) | The current playback speed value. Displayed with one decimal place (e.g., `1.0`, `1.5`, `2.0`).                                                                                                  | `number`               |
| `onPress` (required)             | Callback invoked when the button is pressed.                                                                                                                                                     | `() => void`           |
| `containerStyle`                 | Additional style applied to the button container. The button has fixed dimensions of 40x24 with a rounded pill shape and a border styled using the `controlPlaybackToggleBorder` semantic token. | `StyleProp<ViewStyle>` |


---

This page was last updated at 2026-04-17T17:33:46.661Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/speed-settings-button/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/speed-settings-button/).