> ## 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

> A standalone Angular component that provides voice and video call initiation buttons for user-to-user and group calls

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatCallButtonsComponent` |
  | Package | `@cometchat/chat-uikit-angular` v5.x |
  | Import | `import { CometChatCallButtonsComponent } from "@cometchat/chat-uikit-angular";` |
  | Selector | `<cometchat-call-buttons>` — the class name is NOT a valid tag |
  | CSS root class | `.cometchat-call-buttons` |
  | Standalone | Add `CometChatCallButtonsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
  | Primary output | `(error)` — call initiation failures |
  | Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
  | Stitching | Bind `[user]`/`[group]`. The message header already renders call buttons, so check before adding a second set. |
  | Automatic behaviour | Call initiation and permission prompts are internal |
  | Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
  | Full props | See [Properties](#properties) |
  | Events | See [Events](#events) |
  | Customization | See [Customization](#customization) |
  | Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
</Accordion>

## Overview

The CometChatCallButtons component renders voice and video call buttons for initiating calls to a user or group. It delegates call state management and initiation logic to an internal service, and displays the outgoing call overlay and ongoing call screen automatically when a call is in progress.

### Key Features

* **Voice & Video Calls**: Separate buttons for initiating audio and video calls
* **User & Group Support**: Works with both user-to-user and group calls
* **Outgoing Call Overlay**: Automatically shows the outgoing call screen when a call is initiated
* **Ongoing Call Screen**: Renders the ongoing call UI after a call is accepted
* **Custom Handlers**: Override default call initiation with custom click handlers
* **Template Overrides**: Replace default buttons with custom templates
* **Global Config Priority**: Supports a three-tier priority system (Input > GlobalConfig > Default)
* **Screen Reader Announcements**: Announces call initiation for assistive technologies

<Info>
  **Live Preview** — default call buttons preview.
  [Open in Storybook ↗](https://storybook.cometchat.io/angular/?path=/story/components-calls-cometchat-call-buttons--default)
</Info>

<iframe src="https://storybook.cometchat.io/angular/iframe.html?id=components-calls-cometchat-call-buttons--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "300px", border: "1px solid #e0e0e0"}} title="CometChat Call Buttons — Default" allow="clipboard-write" />

## Basic Usage

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatCallButtonsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-call-buttons-demo',
  standalone: true,
  imports: [CometChatCallButtonsComponent],
  template: `
    <cometchat-call-buttons
      [user]="activeUser"
      (error)="onError($event)"
    ></cometchat-call-buttons>
  `
})
export class CallButtonsDemoComponent {
  activeUser!: CometChat.User;

  onError(error: CometChat.CometChatException): void {
    console.error('Call error:', error);
  }
}
```

## Properties

| Property | Type | Default | Description |
| - | - | - | - |
| `user` | `CometChat.User \| null` | `null` | The user to call. Mutually exclusive with `group`. |
| `group` | `CometChat.Group \| null` | `null` | The group to call. Mutually exclusive with `user`. |
| `hideVoiceCallButton` | `boolean` | `true` | Hides the voice call button when `true`. Defaults to `true` (hidden). When calling is enabled via `UIKitSettingsBuilder.setCallingEnabled(true)`, the resolved default becomes `false` (visible). |
| `hideVideoCallButton` | `boolean` | `true` | Hides the video call button when `true`. Defaults to `true` (hidden). When calling is enabled via `UIKitSettingsBuilder.setCallingEnabled(true)`, the resolved default becomes `false` (visible). |
| `onVoiceCallClick` | `(() => void) \| null` | `null` | Custom voice call click handler. Overrides default call initiation. |
| `onVideoCallClick` | `(() => void) \| null` | `null` | Custom video call click handler. Overrides default call initiation. |
| `onError` | `((error: CometChat.CometChatException) => void) \| null` | `null` | Error callback invoked for any error during call operations. |
| `outgoingCallDisableSoundForCalls` | `boolean` | `false` | Disables sound for the outgoing call overlay. Supports global config override. |
| `outgoingCallCustomSoundForCalls` | `string` | `''` | Custom sound URL for the outgoing call overlay. Supports global config override. |
| `callSettingsBuilder` | `SessionSettings` | `undefined` | A plain v5 `SessionSettings` object used to override the default call settings in the ongoing call screen. Pass a built `SessionSettings` object — the kit does **not** call `.build()` internally. Follows the three-tier priority: @Input > [GlobalConfig](/ui-kit/angular/customization/global-config) > default. |
| `voiceCallButtonView` | `TemplateRef<any> \| null` | `null` | Replaces the default voice call button with a custom template. |
| `videoCallButtonView` | `TemplateRef<any> \| null` | `null` | Replaces the default video call button with a custom template. |

## Events

| Event | Payload Type | Description |
| - | - | - |
| `error` | `CometChat.CometChatException` | Emitted on any error during call operations. |

## Customization

### CSS Variable Overrides

```css theme={null}
cometchat-call-buttons {
  --cometchat-primary-color: #6852D6;
  --cometchat-background-color-01: #ffffff;
  --cometchat-spacing-2: 8px;
}
```

### Custom Button Templates

```html expandable theme={null}
<cometchat-call-buttons
  [user]="user"
  [voiceCallButtonView]="customVoiceBtn"
  [videoCallButtonView]="customVideoBtn"
>
  <ng-template #customVoiceBtn>
    <button class="my-voice-btn">📞 Voice</button>
  </ng-template>

  <ng-template #customVideoBtn>
    <button class="my-video-btn">📹 Video</button>
  </ng-template>
</cometchat-call-buttons>
```

### Custom Call Settings

Pass a plain v5 `SessionSettings` object to customize the call UI. Build the object yourself with `.build()` — the kit does **not** call `.build()` internally:

```typescript expandable theme={null}
import { Component, OnInit } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatCalls } from '@cometchat/calls-sdk-javascript';
import { CometChatCallButtonsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-call-settings',
  standalone: true,
  imports: [CometChatCallButtonsComponent],
  template: `
    <cometchat-call-buttons
      [user]="activeUser"
      [callSettingsBuilder]="customCallSettings">
    </cometchat-call-buttons>
  `
})
export class CustomCallSettingsComponent implements OnInit {
  activeUser!: CometChat.User;
  customCallSettings: any;

  ngOnInit(): void {
    // Build the SessionSettings object yourself — the kit does not call .build().
    this.customCallSettings = new CometChatCalls.CallSettingsBuilder()
      .enableDefaultLayout(true)
      .setIsAudioOnlyCall(false)
      .build();
  }
}
```

<Tip>
  You can also set `callSettingsBuilder` globally via [GlobalConfig](/ui-kit/angular/customization/global-config) so all call components use the same settings without passing the input to each one.
</Tip>

## Accessibility

### Keyboard Navigation

| Key | Action |
| - | - |
| `Enter` | Activate the focused call button |
| `Space` | Activate the focused call button |
| `Tab` | Move focus between voice and video call buttons |

### Screen Reader Support

* Call initiation is announced via a live region for screen readers
* Buttons include descriptive `aria-label` attributes for voice and video call actions

## Related Components

* [CometChatOutgoingCall](./cometchat-outgoing-call.mdx) — Displayed automatically when a call is initiated
* [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Displayed automatically when a call is accepted
* [CometChatMessageHeader](./cometchat-message-header.mdx) — Typically hosts the call buttons


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