1. Buttons
  2. Play Button


Play Button

This component is used to play and pause media.


The <PlayButton> component will toggle the paused state of media as it's pressed by dispatching a media-play-request, and media-pause-request event to the media controller.



You can override the default styles with CSS like so:

        vds-play-button {
  color: pink;
  transition: opacity 0.2s ease-in;

/* Apply styles when media is paused. */
vds-play-button[paused] {

/* Apply styles when media is _not_ paused. */
vds-play-button:not([paused]) {

/* Style default icons. */
vds-play-button [slot='play'] {
vds-play-button [slot='pause'] {


Custom Icons

Here's an example containing a custom play and pause icon: