Playlist Queue Swipe Remove

ProNew

A queue of tracks with the current one marked, move up and move down buttons for reordering without dragging, swipe to remove and a result that is announced. Use this when a phone media app shows an up-next queue that people reorder and trim.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

current

Guide and examples

When to use it

Use it when a phone media app shows an up-next queue that people reorder and trim.

Do not use it for static playlists, or for reordering many items at once where drag and drop with a handle is better.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`tracks`	`Track[]`	`required`	`{ id, title, artist }`.
`current`	`string`	`-`	The playing track id.
`onChange`	`(tracks: Track[]) => void`	`-`	Called with the new order.

Accessibility

Reordering has a button route (Move up, Move down, named after the track), so dragging is never needed; each move is announced with the new position.
The current track is marked with text ("Now playing"), not only an icon.
Removing is the swipe action, reachable by arrow keys, and announces the removal.

Testing

The pattern ships with a Testing Library test (playlist-queue-swipe-remove.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone media app shows an up-next queue that people reorder and trim.

Do not use it for static playlists, or for reordering many items at once where drag and drop with a handle is better.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`tracks`	`Track[]`	`required`	`{ id, title, artist }`.
`current`	`string`	`-`	The playing track id.
`onChange`	`(tracks: Track[]) => void`	`-`	Called with the new order.

Accessibility

Reordering has a button route (Move up, Move down, named after the track), so dragging is never needed; each move is announced with the new position.
The current track is marked with text ("Now playing"), not only an icon.
Removing is the swipe action, reachable by arrow keys, and announces the removal.

Testing

The pattern ships with a Testing Library test (playlist-queue-swipe-remove.test.tsx) that drives it through roles and the keyboard.