Skip to content
Vy logo
Components
React

MediaController

Media controller buttons are used to let users control playback of podcasts, audio books, videos and other multimedia.

Examples

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"
        isPlaying={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" isDisabled />
</Stack>