Button Documentation


The Button class in MonsterJS extends the CustomControl class, providing a customizable button element. It supports various configurations, such as labels, actions, and visual effects like ripples, making it a versatile component for any web application.

Key Features

  • Customizable Appearance: Configure the button’s appearance using CSS classes and templates.
  • Action Handling: Define custom click actions to handle user interactions.
  • Accessibility: Inherits accessibility features from CustomControl, ensuring the button is accessible and usable in various contexts.
  • Form Association: Can be used within forms, with support for value handling and form-associated behaviors.
  • Visual Effects: Supports visual effects like ripple on click, enhancing the user experience.

Methods and Properties


Initializes the button with default or provided options, setting up internal references and event handlers.

Lifecycle Methods

  • [assembleMethodSymbol](): Sets up the button’s internals and event handlers during initialization.

Interaction Methods

  • click(): Programmatically simulates a click on the button.
  • focus(options): Sets focus on the button, with optional parameters to control focus behavior.
  • blur(): Removes focus from the button.

Attribute Observers

Overrides observedAttributes to include additional attributes specific to the button, like data-monster-button-class.

Form Association

  • value: Gets or sets the button’s value, useful in form-associated contexts.
  • formAssociated: Indicates that the button is form-associated.


Provides default settings for templates, labels, classes, disabled state, actions, and effects.

Static Methods

  • getTag(): Returns the tag name used for the button (monster-button).
  • getCSSStyleSheet(): Provides the CSS stylesheets associated with the button, including styles for the button and ripple effect.


The Button class can be used to create custom buttons with various configurations.

<monster-button data-monster-button-class="my-custom-button">Click Me</monster-button>

Alternatively, you can create a button programmatically and set its options using JavaScript.

const button = document.createElement('monster-button');
button.setOption('actions.click', () => alert('Button clicked!'));

The button control encapsulates a button and serves as a basis for derived controls.

// create element
const button = document.createElement('monster-button');

// insert element into the DOM

Slotted Button

The text of the button can be defined either by the option labels.button.

// create element
const button = document.createElement('monster-button');

// insert element into the DOM

// Label
button.setOption('labels.button','My Button');

Or by a slot.

<monster-button>My Button</monster-button>


Standard HTML buttons can listen to different events. Since the standard button sits in a shadowRoot the click event is accessible via an option. The component button uses a callback to listen for click events.

To do this, you must pass a callback to the actions.click option.

const button = document.querySelector('monster-button');


The status button is a special form of the button and has an icon to display the status.

You can also define your own statuses. these must be specified in the options.

// create element
const button = document.createElement('monster-state-button');

// insert element into the DOM

// Label
button.setOption('labels.button','My Button');

// set state: successful, activity or failed

Or by a slot.

<monster-state-button>My Button</monster-state-button>


The button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

monster-button::part(button) {
    background-color: white;

The color scheme of the button can be set using CSS class via the options. You should always use a light color scheme for the status button, so that the icon is the icon is clearly visible. When using the standard design, you should always use the Outline variant should always be used.

const button = document.querySelector('monster-button');

if you want to use the standard classes, you have to include the properties, this can be done for example with postcss.

import  "@schukai/monster/source/components/style/style/color.pcss";
import  "@schukai/monster/source/components/style/style/theme.pcss";
import  "@schukai/monster/source/components/style/style/property.pcss";

The individual parts and slots are shown in the following picture.

This documentation outlines the capabilities and configuration options of the Button class, enabling developers to integrate and customize button elements effectively in their web applications.