---
description: "Button component that toggles loop playback on and off, with visual state reflecting whether the composition will loop."
---
# ef-toggle-loop
## Attributes
- **target** (string) - ID of the element to control (optional if nested in composition)
# ToggleLoop
Button to toggle loop playback. Shows different content based on loop state.
Button to toggle looping playback on and off.
## Import
```tsx
import { ToggleLoop } from "@editframe/react";
```
## Basic Usage
```html live
```
```tsx
import { ToggleLoop, Preview } from "@editframe/react";
```
## Slots
### on
Content shown when loop is enabled. Clicking disables loop.
### off
Content shown when loop is disabled. Clicking enables loop.
### Named Slots
ToggleLoop uses named slots to display different content based on loop state:
- `slot="off"` - Displayed when looping is disabled
- `slot="on"` - Displayed when looping is enabled
The component automatically switches between the two based on the current loop state.
## Icon-Only Toggle
```html live
```
Simple icon button:
```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
```
## In Control Bar
Use in a horizontal control bar with other playback controls:
```tsx
import { TogglePlay, ToggleLoop, Scrubber, TimeDisplay } from "@editframe/react";
export const ControlBar = () => {
return (
);
};
```
## Styled Toggle
Custom styled button with state indication:
```tsx
```
## Minimal Toggle
Compact toggle for tight spaces:
```tsx
Loop: Off
Loop: On
```
## With Custom Icons
Use any icon library:
```tsx
import { ToggleLoop } from "@editframe/react";
import { Repeat } from "lucide-react";
```
## Text-Only Toggle
Simple text button:
```tsx
```
## Badge Style Toggle
Display as a status badge:
```tsx
Loop: OFF
Loop: ON
```
## Full Player Controls
```html live
```
Complete video editor with loop control:
```tsx
import {
Preview,
TogglePlay,
ToggleLoop,
Scrubber,
TimeDisplay,
} from "@editframe/react";
export const VideoEditor = () => {
return (
);
};
```
## State Indicator Badge
```html live
```
## Minimal Text Toggle
```html live
```
## Corner Loop Indicator
Display loop state in corner:
```tsx
import { Timegroup, Video, ToggleLoop } from "@editframe/react";
```
## Settings Panel Toggle
Use in a settings panel:
```tsx
Loop Playback
Repeat video when it ends
```
## Accessibility
Ensure proper labels that update with state:
```tsx
```
## Use Cases
- **Short videos** - Loop a short clip continuously
- **Product demos** - Let users watch the demo repeatedly
- **Animated backgrounds** - Seamlessly loop background videos
- **GIF replacements** - Loop video content like animated GIFs
Loop control is useful for:
- Video previews that should repeat
- Tutorial videos that users can watch multiple times
- Background video content
- Testing and development workflows
- Short animations that benefit from looping