Custom Button#

The CustomButton component is a highly customizable button for your player. It can be used in two ways:

As a simple button that triggers a custom event.
As a button with a menu, where each menu item can trigger its own event.

Configuration Options for #

Option	Type	Description
`enabled`	`boolean`	Whether the button is enabled or not. Defaults to `true`.
`className`	`string` or `array of strings`	Custom CSS class(es) for the button. You can pass multiple class names as an array.
`controlText`	`string`	Text that will appear on the button. Used for accessibility.
`eventName`	`string`	The event that will be triggered when the button is clicked.
`menuItems`	`menuItem[]`	Array of menu item objects for the button to display a dropdown.
`style`	`string`	Inline styles for the button element.
`iconName`	`string`	Icon name for the button (e.g., 'play', 'pause', etc.). This can be used to set an icon on the button.

Configuration Options for #

Option	Type	Required	Description
`label`	`string`	Yes	The label to display for the menu item.
`eventName`	`string`	No	The event triggered when the menu item is clicked. If not provided, the menu item won't trigger any event.

Example Configurations#

Option 1: Simple Button#

const player = window.kwikMotion('my-video', {
  ccbutton: {
    enabled: true,
    className: 'some-class test-class',
    controlText: 'Click Me',
    eventName: 'cclick',
  },
})

const player = window.kwikMotion('my-video', {
  ccbutton: {
    className: 'cass',
    controlText: 'click Me',
    eventName: 'click',
    menuItems: [
      {
        label: 'Option 1',
        eventName: 'menuOption1Click',
      },
      {
        label: 'Option 2',
        eventName: 'menuOption2Click',
      },
    ],
  },
})

Custom Button#

Configuration Options for #

Configuration Options for #

Example Configurations#

Option 1: Simple Button#

Option 2: Button with Menu#