Media controls

Playback

PlaybackStateIcon

Represents idle, buffering, playing, and paused media.

States

4 total

Play

Media is ready to play.

Play

"idle"

Media is ready to play.

Buffering

"buffering"animated

Media is buffering.

Pause

"playing"

Media is currently playing.

Resume

"paused"

Media is paused.

Implementation

Pass your current state.

The component stays presentational. Your application remains in control of async work and business logic. The state prop is a TypeScript string literal union — pass an invalid state and you'll get a type error at build time.

Source: Lucide
License: ISC
States: idle · buffering · playing · paused

example.tsx

import { PlaybackStateIcon } from "@stateglyph/react";
<PlaybackStateIcon state="idle" decorative />