---
description: "Pause button that renders only when the composition is playing, auto-hiding when already paused for clean editor UIs."
---
# ef-pause
## Attributes
- **target** (string) - ID of the element to control (optional if nested in composition)
# Pause
Pause button that automatically hides when playback stops.
## Import
```tsx
import { Pause } from "@editframe/react";
```
## Basic Usage
```html live
```
```tsx
import { Pause, Timegroup, Video } from "@editframe/react";
```
## Auto-Hide Behavior
The pause button automatically sets `display: none` when playback stops. It becomes visible again when playing.
This allows you to create pause controls that only appear during playback without managing state manually.
## Custom Slot Content
Slot any content as the pause button:
```html live
```
```tsx
```
## 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
```
## With Preview Component
Use inside Preview for non-ancestor element control:
```tsx
import { Preview, Pause } from "@editframe/react";
```
The Preview component provides context that Pause automatically consumes.
## Separate Play and Pause
Combine `ef-play` and `ef-pause` for independent buttons that show based on state:
```html live
```
Combine `Play` and `Pause` for independent buttons that show based on state:
```tsx
import { Play, Pause, Timegroup, Video } from "@editframe/react";
export const VideoWithControls = () => {
return (
);
};
```
## Floating Pause Button
```html live
```
Create a hover-triggered pause overlay:
```tsx
import { Pause, Timegroup, Video } from "@editframe/react";
```
## Corner Pause Control
```html live
```
Position pause button with text label:
```tsx
```
## Minimal Pause Icon
Simple icon-only pause button:
```tsx
```
## Custom Pause Icon
Use any icon library:
```tsx
import { Pause } from "@editframe/react";
import { PauseCircle } from "lucide-react";
```
## Bottom Bar Pause
Create a pause button in a control bar:
```tsx
import { Pause } from "@editframe/react";
```
## Toggle vs Separate Buttons
- Use `ef-toggle-play` for a single button that switches icons
- Use separate `ef-play` and `ef-pause` for independent buttons that show/hide based on state
- Use `TogglePlay` for a single button that switches icons
- Use separate `Play` and `Pause` for independent buttons that show/hide based on state
- Choose based on your UI design - both approaches work equally well
## Combining with Other Controls
Build a complete control panel:
```tsx
import { Play, Pause, Scrubber, TimeDisplay } from "@editframe/react";
export const ControlPanel = () => {
return (
);
};
```
## Accessibility
Ensure the button inside Pause has proper labels:
```tsx
```