Custom Components

I’m trying to create a custom HTML component based on an existing BUTTON:

fun FlowOrInteractiveOrPhrasingContent.pfInlineButton(
    text: String? = null,
    block: PfButton.() -> Unit = {}
) = PfButton(text, "pf-m-inline", consumer).visit(block)

class PfButton(text: String? = null, modifier: String?, consumer: TagConsumer<*>) :
        attributesMapOf("class", "pf-c-button"),
    ) {
    init {
        if (text != null) {
        if (modifier != null) {
            classes += modifier

The line classes += modifier in the init block causes an IllegalStateException: Wrong current tag.

Can anybody help here? What am I missing?

Thanks in advance

Thank you! Failed to reproduce the problem with a dummy project. What version of Kotlin and kotlinx-html do you use? Can you attach your project?

My code is at The custom component is Button.kt:

In the meantime I found a workaround setting the CSS classes as part of the call to the super constructor.

I’ll leave a comment in the code where it failed:

Thanks Harald

Thank you! I failed to reproduce the exception after I uncommented the code. Then I added the code from your first message to the Button file. And still failed to get the error on building and running the project. Can you write the steps to reproduce the problem?

These are the steps to reproduce the error on my machine (using commit 3e7193db9846c70523a4f377e219c18b282c513d)

git clone
cd halos-console
./gradlew run

When opening the browser dev tools I can see the following error in the console:

When I comment the init block, everything works as expected.


Thank you! Reproduced the problem, will investigate it.

I minimized the project and created an issue in kotlinx.html project -

Thanks @ivan.kubyshkin!