> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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?` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.