---
description: Combined play/pause toggle button that switches between play and pause states with configurable icons and labels.
---
# ef-toggle-play
## Attributes
- **target** (string) - ID of the element to control (optional if nested in composition)
# TogglePlay
Combined play/pause button that toggles playback and switches content based on state.
Single button that toggles between play and pause states.
## Import
```tsx
import { TogglePlay } from "@editframe/react";
```
## Basic Usage
```html live
```
```tsx
import { TogglePlay, Timegroup, Video } from "@editframe/react";
```
## Slots
### play
Content shown when paused. Clicking starts playback.
### pause
Content shown when playing. Clicking pauses playback.
### Named Slots
TogglePlay uses named slots to display different content based on playback state:
- `slot="play"` - Displayed when paused
- `slot="pause"` - Displayed when playing
The component automatically switches between the two based on the current playback state.
## Icon-Only Toggle
```html live
```
Simple icon button that changes on click:
```tsx
```
## Compact Toggle
```html live
```
## With ef-controls
Use with `ef-controls` to control a non-ancestor element:
```html
```
## Target Attribute
Directly target an element by ID without `ef-controls`:
```html
```
## Center Overlay Toggle
Large button that appears over video:
```tsx
import { TogglePlay, Timegroup, Video } from "@editframe/react";
export const VideoPlayer = () => {
return (
);
};
```
## With Text Labels
Toggle button with changing text:
```tsx
```
## Full Control Bar
```html live
```
Use in a horizontal control bar:
```tsx
import { TogglePlay, Scrubber, TimeDisplay } from "@editframe/react";
export const ControlBar = () => {
return (
);
};
```
## Styled Single Button
Use the same button element for both slots if you want a single button with changing icons:
```html live
```
Custom styled button with smooth transitions:
```tsx
```
## Mobile-Friendly Controls
```html live
```
## With Custom Icons
Use any icon library:
```tsx
import { TogglePlay } from "@editframe/react";
import { PlayCircle, PauseCircle } from "lucide-react";
```
## Minimal Toggle
Compact toggle for tight spaces:
```tsx
▶
⏸
```
## With Preview Component
Use inside Preview for non-ancestor element control:
```tsx
import { Preview, TogglePlay } from "@editframe/react";
```
The Preview component provides context that TogglePlay automatically consumes.
## Full Editor Example
Complete video editor with toggle controls:
```tsx
import { Preview, TogglePlay, Scrubber, TimeDisplay, ToggleLoop } from "@editframe/react";
export const VideoEditor = () => {
return (
);
};
```
## When to Use
- **Use `ef-toggle-play`** when you want a single button that changes appearance
- **Use separate `ef-play` and `ef-pause`** when you want independent buttons that auto-hide
- Both approaches provide the same functionality - choose based on your UI design
- Use `TogglePlay` for a single button that switches icons - simpler UI, single click target
- Use separate `Play` and `Pause` for independent buttons - clearer state indication
- TogglePlay is ideal for control bars and minimal UIs
- Separate buttons work better for overlay controls
## Accessibility
Ensure proper labels that update with state:
```tsx
```