PushButtonComponent

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 task

  • an 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 {
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!
}
}

Constructors

PushButtonComponent
Link copied to clipboard
js
fun PushButtonComponent()

Types

ButtonVariant
Link copied to clipboard
js
enum ButtonVariant : Enum<PushButtonComponent.ButtonVariant>
Companion
Link copied to clipboard
js
object Companion
IconPlacement
Link copied to clipboard
js
enum IconPlacement : Enum<PushButtonComponent.IconPlacement>
IconPlacementContext
Link copied to clipboard
js
class IconPlacementContext
VariantContext
Link copied to clipboard
js
object VariantContext

Functions

enabled
Link copied to clipboard
js
open override fun enabled(value: Boolean)
open override fun enabled(value: Flow<Boolean>)
loading
Link copied to clipboard
js
fun loading(value: Flow<Boolean>)
loadingText
Link copied to clipboard
js
fun loadingText(value: String)
fun loadingText(value: Flow<String>)
render
Link copied to clipboard
js
open override fun render(context: RenderContext, styling: BoxParams.() -> Unit, baseClass: StyleClass, id: String?, prefix: String)
Central method that should do the actual rendering of a component.
text
Link copied to clipboard
js
fun text(value: String)
fun text(value: Flow<String>)

Properties

centerIconStyle
Link copied to clipboard
js
val centerIconStyle: Style<BasicParams>
centerSpinnerStyle
Link copied to clipboard
js
val centerSpinnerStyle: Style<BasicParams>
disabled
Link copied to clipboard
js
open override val disabled: DynamicComponentProperty<Boolean>
element
Link copied to clipboard
js
open override val element: ComponentProperty<Button.() -> Unit>
This property enables the client to access the deeper features of an element even though the component itself does not offer an appropriate functionality.
events
Link copied to clipboard
js
open override val events: ComponentProperty<EventContext<HTMLButtonElement>.() -> Unit>
This property enables the client to access all events offered by the underlying HTML element.
icon
Link copied to clipboard
js
val icon: ComponentProperty<Icons.() -> IconDefinition?>
leftIconStyle
Link copied to clipboard
js
val leftIconStyle: Style<BasicParams>
leftSpinnerStyle
Link copied to clipboard
js
val leftSpinnerStyle: Style<BasicParams>
rightIconStyle
Link copied to clipboard
js
val rightIconStyle: Style<BasicParams>
rightSpinnerStyle
Link copied to clipboard
js
val rightSpinnerStyle: Style<BasicParams>
size
Link copied to clipboard
js
val size: ComponentProperty<FormSizes.() -> Style<BasicParams>>
type
Link copied to clipboard
js
val type: ComponentProperty<PushButtonTypes.() -> ColorScheme>
variant
Link copied to clipboard

Inheritors

LinkButtonComponent
Link copied to clipboard