---
metaTitle: Toggler component | AwesCode UI
meta:
  - name: description
    content: The <AwToggler /> component is used to render Toggler - UI Vue component for AwesCode UI.
title: Toggler
---

# Toggler

**Category:** Atom | **Import:** Global | **Status:** ⚠️ Deprecated

The `AwToggler` component is a collapsible content wrapper with a styled container.

> **⚠️ Deprecated:** This component is deprecated and should not be used in new projects. Use `AwAccordionFold` directly instead.

## Overview

`AwToggler` provides a toggleable content section that can be expanded or collapsed. It wraps `AwAccordionFold` with additional styling for a content container.

## Usage

### Basic Example

```markup
<AwToggler>
    <p>Toggled content</p>
</AwToggler>
```

### With Show Prop

```markup
<AwToggler :show="isOpen">
    <div>Content that is open by default</div>
</AwToggler>
```

## API

### Props

All props from `AwAccordionFold` are supported via `$attrs`:

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| show | Whether content is visible | `Boolean` | `false` | `false` |
| tag | HTML tag for wrapper | `String` | `false` | `'div'` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Toggled content | - | - |

### Events

All events from `AwAccordionFold` are supported via `$listeners`.

## Related Components

- `AwAccordionFold` - Base accordion component
- `AwCard` - Card component that may use togglers

## Migration Guide

**Instead of:**
```markup
<AwToggler :show="isOpen">
    <p>Content here</p>
</AwToggler>
```

**Use:**
```markup
<AwAccordionFold :show="isOpen">
    <div class="bg-mono-800 rounded p-4 mt-3">
        <p>Content here</p>
    </div>
</AwAccordionFold>
```

## Notes

- **Import Method:** Global - Available as atom component
- **Status:** Deprecated - Use `AwAccordionFold` instead
- Wraps `AwAccordionFold` with styled content container
- Content container has background, padding, and rounded corners
- All props and events are passed through to `AwAccordionFold`
- Use for collapsible sections with styled content areas