---

title: BaseIdTogglePanelButton

---

# BaseIdTogglePanelButton

Component containing an event button that emits
XEventsTypes.UserClickedPanelToggleButton when clicked with
the panelId as payload.

It has a default slot to customize its contents.

## Props

| Name                 | Description                                        | Type                | Default       |
| -------------------- | -------------------------------------------------- | ------------------- | ------------- |
| <code>panelId</code> | The panelId to use for the toggle event listeners. | <code>string</code> | <code></code> |

## Slots

| Name                 | Description                                            | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both |                                           |

## Events

A list of events that the component will emit:

- [`UserClickedPanelToggleButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the id of the panelId
  that is going to be toggled.

## Examples

### Basic example

The component renders content passed to the default slot and toggles the panel with panelId
`myToggle`.

```vue
<template>
  <div>
    <BaseIdTogglePanelButton panelId="myToggle" v-slot="{ isPanelOpen }">
      <template v-if="isPanelOpen">
        <img src="./close-button-icon.svg" alt="Close aside" />
        <span>Close aside</span>
      </template>
      <template v-else>
        <img src="./open-button-icon.svg" alt="Open aside" />
        <span>Open aside</span>
      </template>
    </BaseIdTogglePanelButton>
    <BaseIdTogglePanel
      :startOpen="true"
      :animation="animation"
      panelId="myToggle"
    >
      <div class="x-text1">My toggle</div>
    </BaseIdTogglePanel>
  </div>
</template>

<script setup>
import {
  BaseIdTogglePanel,
  BaseIdTogglePanelButton,
} from "@empathyco/x-components";
import { CollapseFromTop } from "@empathyco/x-components/animations";
const animation = CollapseFromTop;
</script>
```