<mr-button>

The <mr-button> embeds a button in the UI of an <mr-panel>.

Example


                    
                        
                        
                            Change color!


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }
                    mr-button {
                        font-family: system-ui;
                        background-color: white;
                        padding: 8px 16px;
                        font-size: 150%;
                        border-radius: 20px;
                    }


                    function changeColor() {
                        let hue = Math.floor(Math.random() * 360);
                        let color = 'hsl(' +  hue + ', 100%, 80%)';
                        document.querySelector("#panel").style.backgroundColor = color;
                    }
                    changeColor();

Definition and Usage

<mr-button> has one optional attribute:

onclick: the function to be called when the button is clicked