Site settings
Change the appearance of the site to suit your preferences
MediaController
Media controller buttons are used to let users control playback of podcasts, audio books, videos and other multimedia.
Some examples of media controllers
() => { const [isPlaying, setPlaying] = React.useState(false); return ( <Stack flexDirection="row"> <SkipButton size="sm" direction="backward" /> <JumpButton size="sm" direction="backward" /> <PlayPauseButton size="lg" playing={isPlaying} onClick={() => setPlaying((c) => !c)} /> <JumpButton size="sm" direction="forward" /> <SkipButton size="sm" direction="forward" /> </Stack> ); };
Different sizes
<Stack> <Stack flexDirection="row"> <PlayPauseButton size="sm" /> <PlayPauseButton size="lg" /> </Stack> <Stack flexDirection="row"> <SkipButton direction="forward" size="sm" /> <SkipButton direction="forward" size="lg" /> </Stack> <Stack flexDirection="row"> <JumpButton direction="forward" size="sm" /> <JumpButton direction="forward" size="lg" /> </Stack> </Stack>
Disabled buttons
<Stack flexDirection="row"> <JumpButton direction="backward" size="sm" /> <JumpButton direction="forward" size="sm" disabled /> </Stack>