Track Item

Liked songs

Midnight CityM83

4:03

Blue MondayNew Order

7:29

NightcallEKavinsky

4:18

GenesisJustice

3:54

Album

IntroThe xx

2:07

CrystalisedThe xx

3:21

The first track is playing: its title turns to the link color. In an album, rows show their position instead of the artwork.

Installation

npx axiom add track-item

pnpm dlx axiom add track-item

yarn dlx axiom add track-item

bun x axiom add track-item

Also copies: item, badge, icon-button, text and their dependencies. The file lands in components/compositions/track-item.tsx. It brings no tokens of its own.

Requires the more icon in your icon registry.

Usage

import { TrackItem } from "@/components/compositions/track-item";

<TrackItem
	title={track.title}
	artist={track.artist}
	artwork={{ uri: track.coverUrl }}
	duration={track.durationSeconds}
	explicit={track.explicit}
	playing={track.id === player.currentId}
	onPress={() => player.play(track.id)}
	onMore={() => openTrackMenu(track)}
/>;

duration is in seconds and shown as 3:45, or 1:02:05 past an hour. The same formatter is exported as formatDuration for a player’s elapsed time.

In an album, leave artwork out and pass index: the row starts with the track number.

Props

Prop	Type	Default	Description
`title`	`string`	—	Name of the track, one line.
`artist`	`string`	—	Under the title, muted.
`artwork`	`ImageSourcePropType`	—	Square cover art, 48pt, with the `sm` radius.
`index`	`number`	—	Track number, shown when there is no artwork.
`duration`	`number`	—	Length in seconds, at the end of the row in tabular figures.
`explicit`	`boolean`	`false`	Adds an “E” Badge before the artist.
`playing`	`boolean`	`false`	The track now playing: title and index in the link color, announced as selected.
`onPress`	`() => void`	—	Plays the track.
`onLongPress`	`() => void`	—	Usually opens the same menu as the more button.
`onMore`	`() => void`	—	Shows a ghost “more” IconButton at the end of the row.
`moreLabel`	`string`	`"More"`	Label of the more button, read with the title: “More, Blue Monday”.
`disabled`	`boolean`	`false`	A track that can’t be played: disabled colors, no press.

Accessibility

The row reads as one element: “Midnight City, M83, 4:03, Now playing”. The playing row is announced as selected. The more button stays a separate element, labelled with the track title.

Built with

Item: the pressable row and its slots.
Badge: the explicit marker.
IconButton: the more button.
Text: title, artist, index and duration.

Used in

No block uses Track Item yet.