Button Component with RiotJS (Material Design)

This article covers creating a Riot button component, using the Material Design CSS BeerCSS. Before starting, make sure you have a base application running, or read my previous article Setup Riot + BeerCSS + Vite.

These articles form a series focusing on RiotJS paired with BeerCSS, designed to guide you through creating components and mastering best practices for building production-ready applications. I assume you have a foundational understanding of Riot; however, feel free to refer to the documentation if needed: https://riot.js.org/documentation/

BeerCSS provides many button styles, such as "large", "outlined", "fill" and many more (see the following screenshot). The goal is to create a button component that dynamically supports all stylings and listens to click events.

Button Component Base

First, create a new file named c-button.riot under the components folder. The c- stands for "component", a useful naming convention and a good practice.

Into ./components/c-button.riot, write the minimum HTML and code for a Button:

<c-button>
    <button>
        <slot></slot>
    </button>
</c-button>

Let's break down the code:

The <c-button> and </c-button> defined a custom root tag, with the same name as the file. You must write it; otherwise, it may create unexpected results. Using only or redefining native HTML tags is a bad practice, so starting c- is a good naming.
To print a custom Button name, a Slot <slot></slot> is used: The <slot> tag is a special Riot.js core feature that allows you to inject and compile the content of any custom component inside its template in runtime.

Then we can load and instantiate the c-button.riot, into a front page index.riot:

<index-riot>
    <div style="width:600px;padding:20px;">
        <h4 style="margin-bottom:20px">Riot + BeerCSS</h4>

        <c-button onclick={ clicked }>Home</c-button>
    </div>
    <script>
        import cButton from "./components/c-button.riot";

        export default {
            components: {
                cButton
            },
            clicked () {
                console.log("clicked");
            }
        }
    </script>
</index-riot>

Code break-down:

The component is imported with import cButton from "../components/c-button.riot" then loaded into the components:{} Riot object.
On the HTML, the Button component is instantiated with <c-button onclick={ clicked }>Home</c-button>
The event click is listened thanks to the onclick attribute: when the event is fired, the function clicked is executed.

Screenshot of the generated HTML with the custom button:

With the simplest button, we can play by creating a counter. One value increased or decreased based on the button click, here are the HTML and Javascript on the index.riot file:

<index-riot>
    <div style="width:600px;padding:20px;">
        <h4 style="margin-bottom:20px">Riot + BeerCSS</h4>

        <c-button onclick={ add }>Add</c-button-test>
        <c-button>{state.number}</c-button-test>
        <c-button onclick={ sub }>Sub</c-button-test>
    </div>
    <script>
        import cButton from "./components/c-button.riot";

        export default {
            components: {
                cButton
            },
            state: {
                number: 0
            },
            add () {
                this.update({ number: this.state.number + 1 })
            },
            sub () {
                this.update({ number: this.state.number - 1 })
            }
        }
    </script>
</index-riot>

Code Breakdown:

To store the number value, it must be declared into the state: {} object.
If the button Add is clicked, it will execute the add() function to add one to the number.
If the button Sub is clicked, it will execute the sub() function to subtract the number by one.

Here is the generated HTML of the small counter:

It is not necessary to create a add and sub function; the counting can be simplified in one line for each button with onclick={ () => update({ number: state.number + 1 }) }. The code for index.riot :

<index-riot>
    <div style="width:600px;padding:20px;">
        <h4 style="margin-bottom:20px">Riot + BeerCSS</h4>
        <c-button onclick={ () => update({ number: state.number + 1 }) }>Add</c-button-test>
        <c-button >{state.number}</c-button-test>
        <c-button onclick={ () => update({number: state.number - 1}) }>Sub</c-button-test>
    </div>
    <script>
        import cButton from "./components/c-button.riot";

        export default {
            components: {
                cButton
            },
            state: {
                number: 0
            }
        }
    </script>
</index-riot>

Button Component Styles

Let's add a custom icon to the c-button.riot:

<c-button>
    <button>
        <i if={ props?.icon }> {props.icon} </i>
        <slot></slot>
    </button>
</c-button>

If the props icon exists (HTML attribute), the <i> tag will be displayed with the icon symbol.

BeerCSS supports Material Fonts by default, here is the list of all icons: https://fonts.google.com/

Let's try the icon by defining the attribute "icon" with a symbol name into our index.riot, such as:

<c-button-test icon="add" onclick={ add }>Add</c-button-test>
<c-button-test>{state.number}</c-button-test>
<c-button-test icon="remove" onclick={ sub }>Sub</c-button-test>

The generated HTML prints the add and minus (named removed) symbols:

To create colour variations, we can add classes based on conditions: the following condition checks if the props.primary, props.secondary, or props.tiertiary exists, then it will add classes "primary", "secondary", or "tertiary" respectively.

<c-button>
    <button class="
            { props?.primary ? " primary" : null }
            { props?.secondary ? " secondary" : null }
            { props?.tertiary ? " tertiary" : null }
        ">
        <i if={ props?.icon }> {props.icon} </i>
        <slot></slot>
    </button>
</c-button>

Now we can try each attribute color on the index.riot:

<c-button-test primary="true" icon="add" onclick={ add }>Add</c-button-test>
<c-button-test secondary="true">{state.number}</c-button-test>
<c-button-test tertiary="true" icon="remove" onclick={ sub }>Sub</c-button-test>