---
description: "Play button component that auto-hides when the composition is already playing, for clean minimal editor control bars."
---
# ef-play
## Attributes
- **target** (string) - ID of the element to control (optional if nested in composition)
# Play
Play button that automatically hides when playback starts.
## Import
```tsx
import { Play } from "@editframe/react";
```
## Basic Usage
```html live
```
```tsx
import { Play, Timegroup, Video } from "@editframe/react";
```
## Auto-Hide Behavior
The play button automatically sets `display: none` when playback starts. It becomes visible again when paused.
This allows you to create a centered play overlay that disappears during playback without managing state manually.
## Custom Slot Content
Slot any content as the play 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
```
## Styled Play Overlay
Center a large play button over video:
```html live
```
```tsx
import { Play, Timegroup, Video } from "@editframe/react";
export const VideoWithPlayButton = () => {
return (
);
};
```
## With Text Label
```html live
```
```tsx
```
## 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";
```
## Corner Play Button
Position play button in a corner:
```tsx
```
## Minimal Play Icon
Simple icon-only play button:
```tsx
```
## With Preview Component
Use inside Preview for non-ancestor element control:
```tsx
import { Preview, Play } from "@editframe/react";
```
The Preview component provides context that Play automatically consumes.
## Custom Play Icon
Use any icon library:
```tsx
import { Play } from "@editframe/react";
import { PlayCircle } from "lucide-react";
```
## Combining Play and Pause
Use `ef-toggle-play` if you want a single button that switches between play and pause. Use separate `ef-play` and `ef-pause` buttons if you want independent buttons that auto-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
## Accessibility
Ensure the button inside Play has proper labels:
```tsx
```