Button

A beautiful button that can make your life easier and also looks good.

Import

import { Button } from "@schukai/monster/source/components/form/button.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

click me!

Introduction

Introducing the Monster Button, a versatile web component designed to enhance user interaction across various web platforms. This component combines traditional button functionalities with advanced features such as dynamic content loading and custom event handling, making it an ideal choice for applications requiring highly interactive user interfaces.

Key Features

Dynamic Content Loading: Load dynamic content directly within the button, enhancing the interactivity without additional navigation.
Customizable Appearance: Easily adjust the appearance of the button to match your application's branding with extensive CSS styling options.
Accessibility: Fully accessible, ensuring that all users can interact with the button regardless of their device or browser.
Ripple Effect: Adds a visually appealing ripple effect on click, providing tactile feedback to the user.
Advanced Event Handling: Supports custom event handlers that can be defined directly within the component's configuration, allowing for tailored functionality on user interactions.

Improving the user experience

The Monster Button enhances user experience by providing a clear and responsive interface, allowing users to interact with web applications more intuitively. Its customizable nature and dynamic capabilities contribute to a smoother and more engaging user interaction, supported by positive feedback from user studies indicating enhanced satisfaction and usability.

Efficiency in the development process

Incorporating the Monster Button into your web projects streamlines the development process, thanks to its compatibility with standard web technologies and its modular design. This ensures easy integration into existing projects and frameworks, enhancing developer productivity and reducing development time.

Simple Button

This is a simple button example. It is a button with the text "click me!". Nothing more, nothing less.

click me!

Javascript

import "@schukai/monster/source/components/form/button.mjs";

HTML

<monster-button>click me!</monster-button>

Stylesheet

/** no additional stylesheet is defined **/

Button With Event

This is a simple button example with click handling. It is a button with the text "click me!". When you click on the button, the text "Button clicked!" will be displayed below the button. The text will be removed after 2 seconds.

You can either attach a classic event handler to the element, or you can use the actions.click option.

click me!

Javascript

import "@schukai/monster/source/components/form/button.mjs";

HTML

<monster-button id="eeSh6A-button">click me!</monster-button>

<div id="eeSh6A-result" style="margin-top: 20px;display: flex;align-items: center;justify-content: center;">

</div>

<script>

    // watch for the DOMContentLoaded event
    window.addEventListener('DOMContentLoaded', function () {
        
        // get the button element and set a click event callback
        document.getElementById('eeSh6A-button').setOption("actions.click", function () {
            
            // set a text to the result element
            document.getElementById('eeSh6A-result').innerHTML = 'Button clicked!';
            
            // Reset the result after 2 seconds.
            // This is only there so that you can click more often.
            setTimeout(function () {
                document.getElementById('eeSh6A-result').innerHTML = '';
            }, 2000);
        });

    });

</script>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which ensures its internal structure and styling are encapsulated. By using a shadow root, the button component remains isolated from external styles and scripts, protecting its layout and behavior from unintended modifications.

Shadow DOM and Accessibility

The encapsulation provided by the Shadow DOM prevents direct manipulation of the component's internal structure. This ensures consistency in both the button's design and behavior. Developers cannot access or override the button's internal elements directly but can utilize exposed parts for targeted styling.

Customizing Through Exported Parts

While the Shadow DOM isolates the component's internal structure, certain elements have been made customizable through exported parts. These parts allow developers to style specific aspects of the button component using CSS without compromising its encapsulation.

Available Part Attributes

control: Represents the button container, including its structure and layout.
button: Represents the button element itself, which can be styled for color, typography, and effects.

Below is an example of how to use CSS part attributes to customize the Button component.


monster-button::part(control) {
    display: inline-block;
    padding: 5px;
}

monster-button::part(button) {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}

monster-button::part(button):hover {
    background-color: #0056b3;
}

monster-button::part(button):disabled {
    background-color: #d6d6d6;
    color: #9a9a9a;
    cursor: not-allowed;
}

Explanation of the Example

monster-button::part(control): Styles the button container, ensuring spacing and alignment.
monster-button::part(button): Styles the button element with a background color, padding, and rounded corners.
monster-button::part(button):hover: Adds a hover effect to change the button's background color.
monster-button::part(button):disabled: Styles the button when it is in a disabled state, making it visually distinct.

Accessibility

The component supports accessibility best practices by ensuring that the button can be interacted with using keyboard navigation and screen readers. The aria-disabled attribute is automatically managed to reflect the button's state, and focus-related methods like focus() and blur() are provided to enhance usability.

HTML Structure

<monster-button></monster-button>

JavaScript Initialization

const element = document.createElement('monster-button');
document.body.appendChild(element);

Exported

Button

Derived from

CustomControl

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomControl.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

Labels

labels.button

string

actions

object

Callbacks

actions.click

string

throw Error

classes

object

CSS classes

classes.button

string

monster-button-primary

disabled

boolean

false

effects

object

Effects

effects.ripple

boolean

true

type

string

button

havior of the button. Possible values are: submit, reset, button

aria

object

Aria attributes

aria.role

string

The role of the button, should only be set if the button is not a button

aria.label

string

click me!

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomControl.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomControl.

State query methods

value()

Returns

{string}: value of the button

The current value of the button.

e = document.querySelector("monster-button");
console.log(e.value);

value(value)

Parameters

value {string}: value

Returns

{void}

Throws

{Error} unsupported type

Set the value of the button.

e = document.querySelector("monster-button");
e.value = 1;

Static methods

[instanceSymbol]()2.1.0

Returns

{symbol}

This method is called by the instanceof operator.

formAssociated()

Returns

{boolean}

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

observedAttributes()

Returns

{string[]}

This method determines which attributes are to be monitored by attributeChangedCallback().

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Button}

Other methods

blur()

The Button.blur() method removes focus from the internal button element.

click()3.27.0

The Button.click() method simulates a click on the internal button element.

focus(options)3.27.0

Parameters

options {object}: options

The Button.focus() method sets focus on the internal button element.

Events

The component emits the following events:

monster-button-clicked
this event is triggered when the button is clicked. It contains the field {button} with the button instance.

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.