---

title: BaseTogglePanel

---

# BaseTogglePanel

Simple panel that receives its open state via prop, which is responsible of rendering
default slot inside a configurable transition.

## Props

| Name                   | Description                                                                                              | Type                       | Default            |
| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------ |
| <code>open</code>      | Handles if the panel is rendered. It is used with v-if instead of v-show to get better<br />performance. | <code>boolean</code>       | <code></code>      |
| <code>animation</code> | Animation component that will be used to animate the panel content.                                      | <code>AnimationProp</code> | <code>'div'</code> |

## Slots

| Name                 | Description                | Bindings<br />(name - type - description) |
| -------------------- | -------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Default content | None                                      |

## Examples

Simple panel that receives its open state via prop, which is responsible for rendering the default slot inside a configurable transition.

### Basic usage

```vue
<template>
  <BaseTogglePanel :open="true" :animation="animation">
    <Filters :filters="filters">
      <template #default="{ filter }">
        <p>{{ filter.label }}</p>
      </template>
    </Filters>
  </BaseTogglePanel>
</template>

<script setup>
import { BaseTogglePanel } from "@empathyco/x-components";
import { CollapseFromTop } from "@empathyco/x-components/animations";
const animation = CollapseFromTop;
const filters = [{ label: "Color" }, { label: "Size" }, { label: "Brand" }];
</script>
```