Add code

Author: garchiro7

articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md

@@ -103,6 +103,8 @@ Consider the following constraints during the implementation of this feature:
 - Custom In-Call Actions: A business application can add a custom "Report Issue" button, allowing users to directly report technical issues during a call.
 - Branding and User Experience: An enterprise app can remove buttons that are irrelevant to its use case and add branded buttons that enhance the user experience.
 
+To ensure a consistent call experience, , we recommend that you integrate Fluent UI icons into your project; available at [Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/). By doing so, your custom icons will match the design of the Call Composite, creating a cohesive and professional appearance.
+
 #### Best Practices
 
 - Minimalism: Avoid overcrowding the contextual menu bar. Only add buttons that are essential for the user experience.

articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/android.md

@@ -10,34 +10,113 @@ ms.service: azure-communication-services
 
 ## Remove buttons
 
-Add description
+`CallCompositeCallScreenControlBarOptions`, allow the flexibility to customize the button bar by removing specific buttons such as camera, microphone, and audio controls. This API allows you to tailor the user interface according to their specific application requirements and user experience design. Just set the visbility to `false` to hide, the default behavior is  for `CallCompositeButtonOptions` object.
 
 #### [Kotlin](#tab/kotlin)
 
 ```kotlin
-TODO: Add code
+val controlBarOptions = CallCompositeCallScreenControlBarOptions()
+
+val cameraButton = CallCompositeButtonOptions()
+    .setVisible(false)
+
+controlBarOptions.setCameraButton(cameraButton)
+
+val callScreenOptions = CallCompositeCallScreenOptions()
+    .setControlBarOptions(controlBarOptions)
+
+val localOptions = CallCompositeLocalOptions()
+    .setCallScreenOptions(callScreenOptions)
+
+val callComposite = CallCompositeBuilder()
+    .build()
+
+callComposite.launch(context, locator, localOptions)
 ```
 
 #### [Java](#tab/java)
 ```java
-TODO: Add code
+CallCompositeCallScreenControlBarOptions controlBarOptions = new CallCompositeCallScreenControlBarOptions();
+
+CallCompositeButtonOptions cameraButton = new CallCompositeButtonOptions()
+        .setVisible(false);
+
+controlBarOptions.setCameraButton(cameraButton);
+
+CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions()
+        .setControlBarOptions(controlBarOptions);
+
+CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
+        .setCallScreenOptions(callScreenOptions);
+
+CallComposite callComposite = new CallCompositeBuilder()
+        .build();
+
+callComposite.launch(context, locator, localOptions);
 ```
 
 -----
 
 ## Add custom actions
 
-Add description
+`Call composite` is using Fluent UI icons, you can download the icons directly from [the Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/) and incorporate them into your project as needed. This approach guarantees visual consistency across all user interface elements, enhancing the overall user experience.
 
 #### [Kotlin](#tab/kotlin)
 
 ```kotlin
-TODO: Add code
+val controlBarOptions = CallCompositeCallScreenControlBarOptions()
+
+controlBarOptions.setCustomButtons(
+    listOf(
+        CallCompositeCustomButtonOptions(
+            R.drawable.my_button_image,
+            "My button",
+            fun(it: CallCompositeCustomButtonClickEvent) {
+                // Process my button onClick
+            },
+        )
+    )
+)
+
+val callScreenOptions = CallCompositeCallScreenOptions()
+    .setControlBarOptions(controlBarOptions)
+
+val localOptions = CallCompositeLocalOptions()
+    .setCallScreenOptions(callScreenOptions)
+
+val callComposite = CallCompositeBuilder()
+    .build()
+
+callComposite.launch(context, locator, localOptions)
 ```
 
 #### [Java](#tab/java)
 ```java
-TODO: Add code
+CallCompositeCallScreenControlBarOptions controlBarOptions = new CallCompositeCallScreenControlBarOptions();
+
+List<CallCompositeCustomButtonOptions> customButtons = new ArrayList<>();
+customButtons.add(
+        new CallCompositeCustomButtonOptions(
+                R.drawable.my_button_image,
+                "My button",
+                eventArgs -> {
+                    // process my button onClick
+                }
+        )
+);
+
+controlBarOptions.setCustomButtons(customButtons);
+
+CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions()
+        .setControlBarOptions(controlBarOptions);
+
+CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
+        .setCallScreenOptions(callScreenOptions);
+
+CallComposite callComposite = new CallCompositeBuilder()
+        .build();
+
+callComposite.launch(context, locator, localOptions);
 ```
 
------
+-----

articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/ios.md

@@ -11,16 +11,39 @@ ms.service: azure-communication-services
 
 ## Remove buttons
 
-Add description
+`CallScreenControlBarOptions`, allow the flexibility to customize the button bar by removing specific buttons such as camera, microphone, and audio controls. This API allows you to tailor the user interface according to their specific application requirements and user experience design. Just set the visbility to `false` to hide, the default behavior is  for `ButtonOptions` object.
 
 ```swift
-TODO: Add code
+let cameraButton = ButtonOptions(visible: false)
+
+let callScreenControlBarOptions = CallScreenControlBarOptions(
+    cameraButton: cameraButton
+)
+
+let callScreenOptions = CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
+let localOptions = LocalOptions(callScreenOptions: callScreenOptions)
+
+let callComposite = CallComposite(credential: credential)
+callComposite.launch(locator: .roomCall(roomId: "..."), localOptions: localOptions)
 ```
 
 ## Add custom actions
 
-Add description
+`Call composite` is using Fluent UI icons, you can download the icons directly from [the Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/) and incorporate them into your project as needed. This approach guarantees visual consistency across all user interface elements, enhancing the overall user experience.
 
 ```swift
-TODO: Add code
+let customButton = CustomButtonOptions(image: UIImage(named: "...")!,
+                                       title: "My button") {_ in
+    // Process my button onClick
+}
+
+let callScreenControlBarOptions = CallScreenControlBarOptions(
+    customButtons: [customButton]
+)
+
+let callScreenOptions = CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
+let localOptions = LocalOptions(callScreenOptions: callScreenOptions)
+
+let callComposite = CallComposite(credential: credential)
+callComposite.launch(locator: .roomCall(roomId: "..."), localOptions: localOptions)
 ```