Navigation Back to home

ConfirmButton

A confirm button control allowing the user to confirm or cancel an action

Import
the javascript logo
import { ConfirmButton } from "@schukai/monster/source/components/form/confirm-button.mjs";
Source
the git logo
Package
the npm logo
Since
1.5.0
Should I proceed?
click me!
Yes
No

Introduction

The ConfirmButton component from the Monster library enhances user interaction by providing a customizable confirmation dialog embedded within a button. This component is designed for applications that require user confirmation before proceeding with an action, ensuring a higher level of user engagement and security.

Key Features

  • Integrated Confirmation Dialog: Offers a built-in pop-up dialog for confirmations directly within the button, reducing the need for additional dialog controls.
  • Customizable Appearance: Fully customizable through templates and styles, allowing the button and dialog to match the design of your application.
  • Dynamic Event Handling: Supports dynamic configuration of event handling for both confirmation and cancellation actions.
  • Accessibility: Designed with accessibility in mind to ensure that all users can interact with the button effectively.
  • Extensive Configuration Options: Provides various configuration options for actions, labels, and popper settings to suit different use cases.

Improving the user experience

The ConfirmButton component enhances the user experience by streamlining interactions that require confirmation. This design reduces user error by providing clear and immediate feedback for critical actions, which is particularly beneficial in environments where confirmation is necessary to proceed. The intuitive interface and customization options ensure that the button fits seamlessly within any application, aligning with user expectations and improving overall user satisfaction.

Efficiency in the development process

Integrating the ConfirmButton into your development process is straightforward. Its compatibility with modern web frameworks ensures easy adoption, while its reusable design enhances productivity. Developers can quickly implement complex user interaction patterns with minimal code, accelerating development timelines and reducing the potential for bugs.

Simple Confirm Button

This is a simple example of using the ConfirmButton component. It demonstrates how to create a basic button with a confirmation dialog box. The user must click the button and confirm the action in the dialog box to proceed.

Actions (provided through the button's functionality) allow dynamic configuration for both confirmation and cancellation actions. The button can also be customized with various configuration options for actions, labels, and Popper settings.

Should I proceed?
click me!
Yes
No

Javascript

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

HTML

<monster-confirm-button>
    <div>Should I proceed?</div>
    <div slot="button">click me!</div>
    <div slot="confirm">Yes</div>
    <div slot="cancel">No</div>
</monster-confirm-button>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements are isolated from the rest of the webpage, ensuring that external styles or scripts cannot accidentally modify its internal layout or behavior.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This ensures that developers cannot manipulate or style these elements from outside the component. The Shadow DOM helps maintain consistency in the design and behavior of the component by preventing external interference.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are explicitly marked for export, allowing developers to target and style these parts using CSS without compromising the component's encapsulation.

Available Part Attributes

  • control: Represents the entire control area of the confirm button, including the dialog container.
  • button: Represents the main trigger button of the confirm component.
  • popper: Represents the dialog container where confirmation messages are displayed.
  • message: Represents the text area inside the dialog displaying the confirmation message.
  • confirm: Represents the confirm button inside the dialog.
  • cancel: Represents the cancel button inside the dialog.

Below is an example of how to use CSS part attributes to customize different parts of the ConfirmButton component.


monster-confirm-button::part(control) {
    background-color: #f0f0f0;
    padding: 15px;
}

monster-confirm-button::part(button) {
    color: white;
    background-color: #007bff;
    border-radius: 5px;
}

monster-confirm-button::part(confirm) {
    background-color: #28a745;
    color: white;
}

monster-confirm-button::part(cancel) {
    background-color: #dc3545;
    color: white;
}

Explanation of the Example

  • monster-confirm-button::part(control): Styles the entire control area, providing background and padding.
  • monster-confirm-button::part(button): Styles the main trigger button with a background color and border radius.
  • monster-confirm-button::part(confirm): Styles the confirm button with a green background and white text.
  • monster-confirm-button::part(cancel): Styles the cancel button with a red background and white text.

Accessibility

Accessibility is a key consideration in the design of this component. By following best practices for web accessibility, the component ensures that users of all abilities can interact with it effectively. This includes support for keyboard navigation, screen readers, and other assistive technologies to provide an inclusive user experience.

HTML Structure

<monster-confirm-button></monster-confirm-button>

JavaScript Initialization

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

Exported

ConfirmButton

Derived from

PopperButton

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 PopperButton.

Option
Type
Default
Description
templates
object
undefined
Template definitions
templates.main
string
undefined
Main template
labels
object
undefined
Label definitions
labels.button
string
undefined
Button label
labels.message
string
undefined
Message label
labels.confirm
string
undefined
Confirm label
labels.cancel
string
undefined
Cancel label
classes
object
undefined
Class definitions
classes.confirmButton
string
undefined
Confirm button class
classes.cancelButton
string
undefined
Cancel button class
actions
object
undefined
Action definitions
actions.confirm
function
undefined
Confirm action
actions.cancel
function
undefined
Cancel action

  • 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 PopperButton.

  • 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 PopperButton.

Behavioral methods

hideDialog()
The individual configuration values can be found in the table.
showConfirmButtonMessage(message,timeout)
Parameters
  • message {string}: message
  • timeout {number}: timeout
Returns
  • {ConfirmButton}
Set and show the confirm button message
showDialog()
Returns
  • {ConfirmButton}

Structural methods

setConfirmButtonState(state,timeout)
Parameters
  • state {string}: state
  • timeout {number}: timeout
Returns
  • {ConfirmButton}
Set the confirm button state

Static methods

[instanceSymbol]()2.1.0
Returns
  • {symbol}
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {Array}
getTag()
Returns
  • {string}

Lifecycle methods

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

[assembleMethodSymbol]()
Returns
  • {PopperButton}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

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