Skip to main content
Version: 5.x


A generic player control that is designed to work with both touch and mouse devices. It also seamlessly works with vime-tooltip, which can be passed in via the default slot.


Vime control component


<!-- ... -->
<!-- ... -->
<vm-controls full-width>
<vm-control label="Playback" keys="k" pressed="false">
<vm-icon name="play"></vm-icon>
<vm-tooltip>Play (k)</vm-tooltip>


expandedIf the control has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenWhether the control should be displayed or not.booleanfalse
identifierThe id attribute of the control.string ∣ undefinedundefined
keysA slash (/) separated string of JS keyboard keys (KeyboardEvent.key), that when caught in a keydown event, will trigger a click event on the control.string ∣ undefinedundefined
label (required)The aria-label property of the control.stringundefined
menuIf the control has a popup menu, then this should be the id of said menu. Sets the aria-controls property.string ∣ undefinedundefined
pressedIf the control is a toggle, this indicated whether the control is in a "pressed" state or not. Sets the aria-pressed property.boolean ∣ undefinedundefined


blurControlRemoves focus from the control.blurControl() => Promise<void>
focusControlFocuses the control.focusControl() => Promise<void>


vmBlurEmitted when the control loses focus.CustomEvent<void>
vmFocusEmitted when the control receives focus.CustomEvent<void>
vmInteractionChangeEmitted when the user is interacting with the control by focusing, touching or hovering on it.CustomEvent<boolean>


Used to pass in the content of the control (text/icon/tooltip).

CSS Custom Properties#

--vm-control-bgThe background of the control.
--vm-control-borderThe border of the control.
--vm-control-border-radiusThe border radius of the control.
--vm-control-colorThe text color of the control.
--vm-control-focus-bgThe background colour of a control when it is being hovered on or focused.
--vm-control-focus-colorThe text colour of a control when it is being hovered on or focused.
--vm-control-icon-sizeThe size of the icon in pixels.
--vm-control-paddingThe padding inside the control.
--vm-control-scaleThe amount to scale the control up/down by.
--vm-control-tap-highlightThe highlight color when a control is tapped.


Used by#