> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Buttons

> Add CometChat Flutter UI Kit call buttons for voice and video calling, call settings, and call-related user actions.

<Accordion title="AI Integration Quick Reference">
  | Field         | Value                                                                                                                                    |
  | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
  | Component     | `CometChatCallButtons`                                                                                                                   |
  | Package       | `cometchat_chat_uikit`                                                                                                                   |
  | Import        | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';`                                                                      |
  | Barrel        | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both. |
  | Purpose       | Add CometChat Flutter UI Kit call buttons for voice and video calling, call settings, and call-related user actions.                     |
  | Data props    | `user` · `group`                                                                                                                         |
  | Actions       | `onError`                                                                                                                                |
  | View slots    | `callSettingsBuilder`                                                                                                                    |
  | Styling       | `callButtonsStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here.                                      |
  | Prerequisites | `CometChatUIKit` initialised and a user logged in.                                                                                       |
  | Full props    | [11 props](#functionality)                                                                                                               |
</Accordion>

## Overview

The `CometChatCallButtons` widget provides users with the ability to make calls, access call-related functionalities, and control call settings.

## Usage

### Integration

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
    import 'package:flutter/material.dart';

    class CallButtonsExample extends StatefulWidget {
      const CallButtonsExample({super.key});

      @override
      State<CallButtonsExample> createState() => _CallButtonsExampleState();
    }

    class _CallButtonsExampleState extends State<CallButtonsExample> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Center(child: CometChatCallButtons()),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

##### onError

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallButtons(
      onError: (e) {
        // Handle error
      },
    )
    ```
  </Tab>
</Tabs>

***

### Events

| Event          | Description                                 |
| -------------- | ------------------------------------------- |
| ccCallAccepted | Triggers when the outgoing call is accepted |
| ccCallRejected | Triggers when the outgoing call is rejected |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    class _YourScreenState extends State<YourScreen> with CometChatCallEventListener {
      @override
      void initState() {
        super.initState();
        CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
      }

      @override
      void dispose() {
        super.dispose();
        CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
      }

      @override
      void ccCallAccepted(Call call) {
        // Handle call accepted
      }

      @override
      void ccCallRejected(Call call) {
        // Handle call rejected
      }
    }
    ```
  </Tab>
</Tabs>

***

## Customization

### Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallButtons(
      callButtonsStyle: CometChatCallButtonsStyle(
        voiceCallIconColor: Color(0xFF6852D6),
        videoCallIconColor: Color(0xFF6852D6),
        voiceCallButtonColor: Color(0xFFEDEAFA),
        videoCallButtonColor: Color(0xFFEDEAFA),
        voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
        videoCallButtonBorderRadius: BorderRadius.circular(12.5),
      ),
    )
    ```
  </Tab>
</Tabs>

### Functionality

| Property                    | Description             | Code                                                             |
| --------------------------- | ----------------------- | ---------------------------------------------------------------- |
| User                        | Set User object         | `user: User?`                                                    |
| Group                       | Set Group object        | `group: Group?`                                                  |
| CallSettingsBuilder         | Configure call settings | `callSettingsBuilder: CallSettingsBuilder?`                      |
| Hide Video Call             | Hide video call button  | `hideVideoCallButton: bool?`                                     |
| Hide Voice Call             | Hide voice call button  | `hideVoiceCallButton: bool?`                                     |
| Video Call Icon             | Custom video call icon  | `videoCallIcon: Icon?`                                           |
| Voice Call Icon             | Custom voice call icon  | `voiceCallIcon: Icon?`                                           |
| Outgoing Call Configuration | Configure outgoing call | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |