> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# updateCustomTrayButtons()

> Sets or updates custom buttons in the Daily Prebuilt tray.

`updateCustomTrayButtons(customTrayButtons)`

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Sets the custom tray buttons for a Daily Prebuilt call. Equivalent to setting [`customTrayButtons`](/reference/daily-js/types/daily-call-options#param-custom-tray-buttons) at call creation, but can be called at any time to add, update, or remove buttons.

<Warning>
  The provided object completely replaces the previous set of buttons. To add a button to an existing set, include all current buttons alongside the new one.
</Warning>

## Parameters

<ParamField body="customTrayButtons" type="DailyCustomTrayButtons" required>
  An object whose keys are button IDs and whose values are button config objects.

  <Expandable title="DailyCustomTrayButton fields" defaultOpen="true">
    <ParamField body="iconPath" type="string" required>
      URL to the button icon (SVG recommended). Must be an `https:` URL since Prebuilt runs inside an `<iframe>`.
    </ParamField>

    <ParamField body="label" type="string" required>
      Accessible label for the button.
    </ParamField>

    <ParamField body="tooltip" type="string" required>
      Tooltip text shown on hover.
    </ParamField>

    <ParamField body="iconPathDarkMode" type="string">
      URL to an alternate icon for dark mode. Must be an `https:` URL.
    </ParamField>

    <ParamField body="visualState" type="'default' | 'active' | 'sidebar-open'">
      Visual state of the button. Defaults to `'default'`.
    </ParamField>
  </Expandable>
</ParamField>

## Return value

Returns `this` (the `DailyCall` instance) for chaining.

## Example

```javascript theme={null}
call.updateCustomTrayButtons({
  raiseHand: {
    iconPath: 'https://example.com/icons/hand.svg',
    iconPathDarkMode: 'https://example.com/icons/hand-dark.svg',
    label: 'Raise hand',
    tooltip: 'Raise your hand',
    visualState: 'default',
  },
  pollButton: {
    iconPath: 'https://example.com/icons/poll.svg',
    label: 'Poll',
    tooltip: 'Open poll',
  },
});
```

When a custom button is clicked, a [`custom-button-click`](/reference/daily-js/events/iframe-ui-events#custom-button-click) event fires with the button's ID.

## See also

<CardGroup>
  <Card title="Types" icon="t" iconType="solid">
    * [DailyCallOptions: customTrayButtons](/reference/daily-js/types/daily-call-options#param-custom-tray-buttons)
  </Card>

  <Card title="Methods" icon="code" iconType="solid">
    * [customTrayButtons()](/reference/daily-js/instance-methods/custom-tray-buttons)
  </Card>

  <Card title="Events" icon="bolt" iconType="solid">
    * [custom-button-click](/reference/daily-js/events/iframe-ui-events#custom-button-click)
  </Card>

  <Card title="Guides" icon="book-open" iconType="solid">
    * [Custom tray buttons](/docs/prebuilt/customizing-daily-prebuilt#custom-tray-buttons)
  </Card>
</CardGroup>