Push Button Component
This class combines the configuration and the core rendering of a button.
The rendering functions are used by the component factory functions pushButton and clickButton, so they are not meant to be called directly unless you plan to implement your own button. If not, just use those functions for stetting up a button!
Much more important are the configuration functions. You can configure the following aspects:
the type (
`colorScheme`) - default is`primary`the label text
the icon including its position (left or right)
a state called
`loading`for visualizing a longer background taskan additional label during the loading state
some predefined styling variants
link events of the button like
`clicks`with external handlers
This can be done within a functional expression that is the last parameter of the two button functions, called `build`. It offers an initialized instance of this PushButtonComponent class as receiver, so every mutating method can be called for configuring the desired state for rendering the button.
The following example shows the usage:
pushButton { /* this == PushButtonComponent() */
icon { fromTheme { check } } // set up an icon
iconPlacement { right } // place the icon on the right side (``left`` is the default)
loading(someStore.loading) // pass in some [Flow<Boolean>] that shows a spinner if ``true`` is passed
loadingText("saving") // show an _alternate_ label, if store sends ``true``
text("save") // define the default label
disabled(true) // disable the button; could also be a ``Flow<Boolean>`` for dynamic disabling
events { // open inner context with all DOM-element events
clicks handledBy someStore.update // react to click event
}
element {
// exposes the underlying HTML button element for direct access. Use with caution!
}
}