how to change the URL of the "leave" button in react client

Thanks for reaching out, Kaster. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.

i'm using built-in component, and I want to change the link it leads to after clicking

Hey there! Just a quick heads-up: the built-in 'leave' button in the LiveKit React client doesn’t let you directly customize the redirection URL through its props. But no worries—you can totally make your own custom leave button and add it to the

ControlBar

component. Here’s a friendly step-by-step on how to do it: 1. Create a Custom Leave Button:

import { useRoomContext } from "@livekit/components-react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { X } from "react-feather";

export default function CustomLeaveButton() {
  const room = useRoomContext();
  const router = useRouter();

  const handleLeave = async () => {
    await room.disconnect();
    // Just swap '/your-custom-url' with wherever you want to send users
    router.push('/your-custom-url');
  };

  return (
    
  );
}

2. Pop Your Custom Button into the ControlBar:

<ControlBar controls={{ leave: true }}>
  <CustomLeaveButton />
</ControlBar>

Just a heads-up: this example uses Next.js for routing. If you’re working with a different routing setup, you might need to tweak the redirection part a bit. If you hit any bumps or want a hand getting this set up in your app, just shout—I’m here to help!

after creating custom leave button and adding to ControlBar it still shows built-in leave button which leads to parent path

If you want to remove the built-in leave button from the

ControlBar

, you can simply pass the

controls

prop with

leave

set to

false

. This way, the default leave button will be hidden, but all your other controls will stay just as they are. Here’s a quick example for you:

<ControlBar controls={{ leave: false }} />

Once you do this, only your custom leave button will show up. If you have any questions or need a hand with anything else, just let me know—I’m here to help! Sources: packages/react/src/components/controls/DisconnectButton.tsx

after setting

leave: false

no leave buttons shows up. my customleavebutton either

Hey there! To get your custom leave button showing up in the

ControlBar

after you’ve disabled the built-in leave button, you’ll want to add your custom button directly to the

ControlBar

component. Here’s a simple way to do it: 1. Create a Custom Leave Button:

import { useRoomContext } from "@livekit/components-react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { X } from "react-feather";

export default function CustomLeaveButton() {
  const room = useRoomContext();
  const router = useRouter();

  const handleLeave = async () => {
    await room.disconnect();
    router.push('/your-custom-url');
  };

  return (
    
  );
}

2. Integrate the Custom Button into the ControlBar:

import { ControlBar as BaseControlBar } from "@livekit/components-react";
import CustomLeaveButton from "./CustomLeaveButton";

export function ControlBar({ controls, ...props }) {
  return (
    
  );
}

Just be sure to explicitly include your custom button inside the

ControlBar

component. That way, it’ll show up nicely even when the default leave button is turned off. If anything’s unclear or you want a hand with this, just let me know—I’m happy to help!