# Ringing call

[`RingingCall`](https://github.com/GetStream/stream-video-js/tree/main/packages/react-sdk/src/components/RingingCall) displays incoming or outgoing [ring calls](/video/docs/react/guides/joining-and-creating-calls/#ring-call/) with member avatars, connection status, and accept/cancel buttons.

## Best Practices

- Show `RingingCall` when `callingState` is `CallingState.RINGING`.
- Use `call.isCreatedByMe` to distinguish incoming vs outgoing calls.
- Provide callbacks for post-accept/reject navigation.

<gallery>

![Default incoming call panel](@video/react/_assets/ui-components/ringing-call-panel-incoming.png)

![Default outgoing call panel](@video/react/_assets/ui-components/ringing-call-panel-outgoing.png)

</gallery>

## General usage

```tsx
import { Call, RingingCall, StreamCall } from "@stream-io/video-react-sdk";

const MyRingingCallUI = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <RingingCall />
    </StreamCall>
  );
};
```

## Ringing call controls

The `RingingCall` component features [`CancelCallButton`](/video/docs/react/ui-components/call/call-controls#cancelcallbutton/) to reject/cancel the outgoing/incoming call and in case of incoming call panel, also [`AcceptCallButton`](/video/docs/react/ui-components/call/call-controls#acceptcallbutton/) is displayed.

## Props RingingCall

### `includeSelf`

| Type                     | Default |
| ------------------------ | ------- |
| `boolean` \| `undefined` | `false` |

Whether to include the current user in the list of members to show.

### `totalMembersToShow`

| Type                    | Default |
| ----------------------- | ------- |
| `number` \| `undefined` | `3`     |

The maximum number of members to show.

## Props RingingCallControls

None

## Customization

If you want to create your own ringing call panel, see our [ringing call panel customization guide](/video/docs/react/ui-cookbook/ringing-call/).


---

This page was last updated at 2026-07-10T16:05:29.756Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-components/call/ringing-call/](https://getstream.io/video/docs/react/ui-components/call/ringing-call/).