> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AudioRecordButton

> A circular icon button that toggles audio recording.

```tsx theme={null}
import { AudioRecordButton } from "@fanvue/ui";
import type { AudioRecordButtonProps, AudioRecordButtonStatus } from "@fanvue/ui";
```

## Examples

## Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-audiorecordbutton--sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AudioRecordButton — Sizes" />
</Frame>

```tsx theme={null}
import { AudioRecordButton } from "@fanvue/ui";

<div className="flex items-center gap-4">
  <AudioRecordButton status="idle" size="32" />
  <AudioRecordButton status="idle" size="40" />
  <AudioRecordButton status="idle" size="48" />
  <AudioRecordButton status="idle" size="52" />
  <AudioRecordButton status="idle" size="72" />
</div>
```

## Idle

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-audiorecordbutton--idle&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AudioRecordButton — Idle" />
</Frame>

```tsx theme={null}
import { AudioRecordButton } from "@fanvue/ui";

<AudioRecordButton status="idle" size="40" />
```

## Recording

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-audiorecordbutton--recording&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AudioRecordButton — Recording" />
</Frame>

```tsx theme={null}
import { AudioRecordButton } from "@fanvue/ui";

<AudioRecordButton status="recording" size="40" />
```

## Both States

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-audiorecordbutton--both-states&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AudioRecordButton — Both States" />
</Frame>

```tsx theme={null}
import { AudioRecordButton } from "@fanvue/ui";

<div className="flex items-center gap-4">
  <AudioRecordButton size="40" status="idle" />
  <AudioRecordButton size="40" status="recording" />
</div>
```

## Props

## AudioRecordButton

A circular icon button that toggles audio recording. It owns the record lifecycle so consumers flip a single `status` prop instead of swapping an `IconButton`'s icon and colour: `idle` shows the microphone to start, `recording` turns destructive with a stop glyph to end. Used by `AudioUpload` for its in-progress stop control.

<ParamField path="aria-label" type="string">
  Accessible name. Falls back to a status-aware default ("Record" / "Stop recording") when omitted so screen readers announce the action.
</ParamField>

<ParamField path="counterValue" type="number">
  When provided, displays a `Count` badge at the top-right corner.
</ParamField>

<ParamField path="negative" type="boolean" default="false">
  Forces the dark-surface treatment regardless of theme. Only honoured on the `primary`, `secondary`, `tertiary`, and `outline` variants.
</ParamField>

<ParamField path="size" type="&#x22;24&#x22; | &#x22;32&#x22; | &#x22;40&#x22; | &#x22;48&#x22; | &#x22;52&#x22; | &#x22;72&#x22;" default="40">
  Size of the button in pixels.
</ParamField>

<ParamField path="status" type="&#x22;idle&#x22; | &#x22;recording&#x22;" default="idle">
  Recording state; drives the icon and colour.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `AudioRecordButtonProps`, `AudioRecordButtonStatus`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)