Media playlist

Ready to use


import {MediaPlaylist} from '@primer/react-brand'

Examples

Name	Type	Default	Description
`children`	`ReactNode`		Includes one required `MediaPlaylist.Heading` and one or more items
`defaultSelectedIndex`	`number`	`0`	Default selected index for uncontrolled mode
`selectedIndex`	`number`		Selected index for controlled mode
`onChange`	`(selectedIndex: number) => void`		Callback called when selected index changes

MediaPlaylist extends the HTML div element and supports all div props.

Name	Type	Default	Description
`children`	`ReactNode`		Visible playlist heading and accessible label for the playlist items
`as`	`'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h3'`	Semantic heading level
`id`	`string`		Optional custom ID used for the tablist `aria-labelledby` relationship

MediaPlaylist.Heading renders a visible heading and active item counter.

Name	Type	Description
`children`	`React.ReactElement[]`	Must include ItemHeading, ItemContent, and ItemMedia
`thumbnail`	`ReactNode`	Thumbnail media displayed in the playlist item button
`className`	`string`	Optional custom class

Name	Type	Description
`title`	`ReactNode`	Item title text
`description`	`ReactNode`	Optional metadata rendered under the title, such as a video duration
`children`	`ReactNode`	Custom item heading content when title/description props are not used

MediaPlaylist.ItemHeading renders as a span and extends the Text component, excluding the as prop.

Name	Type	Default	Description
`children`	`ReactNode`		Item body content

MediaPlaylist.ItemContent extends the HTML div element and supports all div props.

Name	Type	Default	Description
`children`	`React.ReactElement`		Item media

MediaPlaylist.ItemMedia extends the HTML div element and supports all div props.