---

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 rendering content passed to the default slot and opening the panel toggle with panelId
`my-toggle`.

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

<script>
import {
  BaseIdTogglePanel,
  BaseIdTogglePanelButton,
  CollapseFromTop,
} from '@empathyco/x-components'

export default {
  components: {
    BaseIdTogglePanel,
    BaseIdTogglePanelButton,
    CollapseFromTop,
  },
  data: function () {
    return {
      animation: CollapseFromTop,
    }
  },
}
</script>
```