Button

Buttons

Buttons are components that can trigger multiple actions.

There are three main ways to create a button: the first two are simple, while the third allows you to build more complex buttons.

Button with an icon

1. Add an Icon component and choose the desired icon.
2. You can assign an action to the icon in two different ways:
   • Fill in the Roll field with a dice roll and the roll’s title.
   • Add the class clickable and [link|connect the button to a JS script].

Button with a label

1. Add a Label component and set the text to the value you want.
2. Create an action for the button in two ways:
   • Fill in the Roll field with a dice roll and check the Clickable option.
   • Add the class clickable and connect the button to a JS script.

Complex button with a container

Sometimes, you may want to create more advanced buttons by overlaying multiple elements (icons, labels, etc.).

1. Place a Container.
2. Add the elements you want to overlay inside this container.
3. Add the position-absolute class to each of the components inside the container so that they overlap.
4. Use m and p] classes to adjust positioning.
5. Adjust opacity, size, and color to differentiate the elements.
6. Finally, add the clickable class to the parent container so that the whole button reacts on hover.
7. Assign an id to the container (e.g., button_action) so you can connect it to your script.

Connect the button to a script

To link a button to a scripted action:

1. Define a clear id for your button (e.g., button_action, button_roll, button_hide...).
2. Create an initialization function to connect the button to an action.

init = function(sheet) {
    if (sheet.id() === "main") {
        initMain(sheet);
    }
};
const initMain = function(sheet) {
    // Main initialization
    initButton(sheet);
};
const initButton = function(sheet){
    log("START INIT BUTTON");
    // Define the button action when clicked
    const buttonAction = function () {
        // Add instructions to execute here
    };
    // Get the button component using its ID
    let button = sheet.get("button_action");
    // Connect the "click" action to the buttonAction function
    button.on("click", buttonAction);
    log("END INIT BUTTON");
};

Using buttons

You can find tutorials that use buttons here:

1. Manage Roll
2. Hide and show elements [TODO]
3. Send information to the chat [TODO]
4. Move a view inside a repeater [TODO]