---

title: BaseHeaderTogglePanel

---

# BaseHeaderTogglePanel

Toggle panel which uses the base toggle panel, adds a header and manage the
open / close state of the panel.

## Props

| Name                        | Description                                                             | Type                       | Default                        |
| --------------------------- | ----------------------------------------------------------------------- | -------------------------- | ------------------------------ |
| <code>animation</code>      | Animation component that will be used to animate the base-toggle-panel. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
| <code>startCollapsed</code> | Handles if the panel is open by default.                                | <code>boolean</code>       | <code></code>                  |
| <code>headerClass</code>    | Class inherited by content element.                                     | <code>string</code>        | <code></code>                  |

## Slots

| Name                        | Description                                                     | Bindings<br />(name - type - description) |
| --------------------------- | --------------------------------------------------------------- | ----------------------------------------- |
| <code>header</code>         | (Required) Slot that is be used for replacing the whole header. | <br />                                    |
| <code>header-content</code> | (Required) Slot used to just pass the content.                  |                                           |
| <code>default</code>        | (Required) Default content.                                     | None                                      |

## Events

A list of events that the component will emit:

- `open`: emitted after the user clicks the element and opens it.
- `close`: emitted after the user clicks the element and closes it.

## Examples

Toggle panel which uses the base toggle panel, adds a header and manages the open/close state of the panel.

### Basic usage

```vue
<template>
  <BaseHeaderTogglePanel :animation="animation" :start-collapsed="false">
    <template #header-content="{ open }">
      <p>Header, open: {{ open ? "close" : "open" }}</p>
    </template>
    <template #default>
      <p>Default content</p>
    </template>
  </BaseHeaderTogglePanel>
</template>

<script setup>
import { BaseHeaderTogglePanel } from "@empathyco/x-components";
import { CollapseHeight } from "@empathyco/x-components/animations";
const animation = CollapseHeight;
</script>
```

### Custom header

```vue
<template>
  <BaseHeaderTogglePanel :animation="animation" :start-collapsed="true">
    <template #header="{ toggleOpen, open }">
      <p>Header, open: {{ open ? "close" : "open" }}</p>
      <button @click="toggleOpen">Toggle</button>
    </template>
    <template #default>
      <p>Default content</p>
    </template>
  </BaseHeaderTogglePanel>
</template>

<script setup>
import { BaseHeaderTogglePanel } from "@empathyco/x-components";
import { CollapseHeight } from "@empathyco/x-components/animations";
const animation = CollapseHeight;
</script>
```

### Customizing default header with classes

The `headerClass` prop can be used to add classes to the header of the toggle panel.

```vue
<template>
  <BaseHeaderTogglePanel
    headerClass="custom-class"
    :animation="animation"
    :start-collapsed="false"
  >
    <template #header-content="{ open }">
      <p>Header, open: {{ open ? "close" : "open" }}</p>
    </template>
    <template #default>
      <p>Default content</p>
    </template>
  </BaseHeaderTogglePanel>
</template>

<script setup>
import { BaseHeaderTogglePanel } from "@empathyco/x-components";
import { CollapseHeight } from "@empathyco/x-components/animations";
const animation = CollapseHeight;
</script>
```