fun RenderContext.clickButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "push-button", build: PushButtonComponent.() -> Unit = {}): Listener<MouseEvent, HTMLButtonElement>

This component generates a simple button.

You can set the label, an icon, the position of the icon and access its events. For a detailed overview about the possible properties of the component object itself, have a look at PushButtonComponent

In contrast to the pushButton component, this variant returns a Listener (basically a Flow) in order to combine the button declaration directly to a fitting handler. Some other components offer such a handler btw, so for example you can combine such a clickButton with a modal like this:

clickButton { text("save") } handledBy modal {
items { p {+"foo"} }


a listener (think of a flow!) that offers the clicks of the button

See also



optional CSS class that should be applied to the element


a lambda expression for setting up the component itself. Details in PushButtonComponent


the ID of the element


the prefix for the generated CSS class resulting in the form `$prefix-$hash`


a lambda expression for declaring the styling as fritz2's styling DSL