From 134cb687c4e05fd81a03b682505f9fb9d741a8d7 Mon Sep 17 00:00:00 2001
From: Robert Jaros <rjaros@finn.pl>
Date: Sat, 9 May 2020 23:53:57 +0200
Subject: Add new className parameter to all DSL builder functions.

---
 src/main/kotlin/pl/treksoft/kvision/core/Widget.kt | 30 ++++++++++++++++----
 .../pl/treksoft/kvision/core/WidgetWrapper.kt      |  6 ++--
 .../kotlin/pl/treksoft/kvision/form/FieldLabel.kt  |  9 ++++--
 .../kotlin/pl/treksoft/kvision/form/FormPanel.kt   |  7 +++--
 .../treksoft/kvision/form/check/CheckBoxInput.kt   |  7 +++--
 .../pl/treksoft/kvision/form/check/RadioGroup.kt   |  2 +-
 .../pl/treksoft/kvision/form/check/RadioInput.kt   |  7 +++--
 .../kotlin/pl/treksoft/kvision/form/range/Range.kt |  2 +-
 .../pl/treksoft/kvision/form/range/RangeInput.kt   | 17 +++++++++--
 .../treksoft/kvision/form/select/SimpleSelect.kt   |  2 +-
 .../kvision/form/select/SimpleSelectInput.kt       | 15 ++++++++--
 .../pl/treksoft/kvision/form/text/AbstractText.kt  |  2 +-
 .../pl/treksoft/kvision/form/text/TextAreaInput.kt |  9 ++++--
 .../pl/treksoft/kvision/form/text/TextInput.kt     |  8 ++++--
 src/main/kotlin/pl/treksoft/kvision/html/Bold.kt   |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Button.kt | 14 +++++++--
 src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt |  8 ++++--
 .../kotlin/pl/treksoft/kvision/html/CustomTag.kt   |  7 +++--
 src/main/kotlin/pl/treksoft/kvision/html/Div.kt    |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Footer.kt |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/H1.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/H2.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/H3.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/H4.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/H5.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/H6.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Header.kt |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt | 17 +++++++++--
 src/main/kotlin/pl/treksoft/kvision/html/Image.kt  | 12 ++++++--
 src/main/kotlin/pl/treksoft/kvision/html/Li.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Link.kt   | 33 +++++++++++++++++++---
 .../kotlin/pl/treksoft/kvision/html/ListTag.kt     |  9 ++++--
 src/main/kotlin/pl/treksoft/kvision/html/Main.kt   |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Nav.kt    |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Ol.kt     |  7 +++--
 src/main/kotlin/pl/treksoft/kvision/html/P.kt      |  6 ++--
 .../kotlin/pl/treksoft/kvision/html/Section.kt     |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Span.kt   |  6 ++--
 src/main/kotlin/pl/treksoft/kvision/html/Tag.kt    | 13 +++++++--
 src/main/kotlin/pl/treksoft/kvision/html/Ul.kt     |  7 +++--
 .../kotlin/pl/treksoft/kvision/panel/DockPanel.kt  | 14 +++++++--
 .../pl/treksoft/kvision/panel/FieldsetPanel.kt     |  6 ++--
 .../kotlin/pl/treksoft/kvision/panel/FlexPanel.kt  |  9 ++++--
 .../kotlin/pl/treksoft/kvision/panel/GridPanel.kt  | 19 +++++++++++--
 .../kotlin/pl/treksoft/kvision/panel/HPanel.kt     |  6 ++--
 .../pl/treksoft/kvision/panel/SimplePanel.kt       |  9 ++++--
 .../kotlin/pl/treksoft/kvision/panel/SplitPanel.kt |  7 +++--
 .../kotlin/pl/treksoft/kvision/panel/StackPanel.kt |  8 ++++--
 .../kotlin/pl/treksoft/kvision/panel/VPanel.kt     |  7 +++--
 src/main/kotlin/pl/treksoft/kvision/table/Cell.kt  | 13 ++++++---
 .../kotlin/pl/treksoft/kvision/table/HeaderCell.kt |  7 +++--
 src/main/kotlin/pl/treksoft/kvision/table/Row.kt   |  7 +++--
 src/main/kotlin/pl/treksoft/kvision/table/Table.kt | 11 ++++++--
 src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt |  8 ++++++
 54 files changed, 367 insertions(+), 110 deletions(-)

(limited to 'src/main/kotlin')

diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
index 2d2fac29..d077415e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
@@ -38,6 +38,7 @@ import pl.treksoft.kvision.utils.SnOn
 import pl.treksoft.kvision.utils.emptyOn
 import pl.treksoft.kvision.utils.hooks
 import pl.treksoft.kvision.utils.on
+import pl.treksoft.kvision.utils.set
 import pl.treksoft.kvision.utils.snAttrs
 import pl.treksoft.kvision.utils.snClasses
 import pl.treksoft.kvision.utils.snOpt
@@ -121,10 +122,12 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent(), Component
      * A function called after the widget is inserted to the DOM.
      */
     var afterInsertHook: ((VNode) -> Unit)? = null
+
     /**
      * A function called after the widget is removed from the DOM.
      */
     var afterDestroyHook: (() -> Unit)? = null
+
     /**
      * A function called after the widget is disposed.
      */
@@ -756,13 +759,26 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent(), Component
      */
     protected open fun createLabelWithIcon(
         label: String, icon: String? = null,
-        image: ResString? = null
+        image: ResString? = null,
+        separator: String? = null
     ): Array<out Any> {
         val translatedLabel = translate(label)
         return if (icon != null) {
-            arrayOf(KVManager.virtualize("<i class='$icon'></i>"), " $translatedLabel")
+            if (separator == null) {
+                arrayOf(KVManager.virtualize("<i class='$icon'></i>"), " $translatedLabel")
+            } else {
+                arrayOf(KVManager.virtualize("<i class='$icon'></i>"), KVManager.virtualize(separator), translatedLabel)
+            }
         } else if (image != null) {
-            arrayOf(KVManager.virtualize("<img src='$image' alt='' />"), " $translatedLabel")
+            if (separator == null) {
+                arrayOf(KVManager.virtualize("<img src='$image' alt='' />"), " $translatedLabel")
+            } else {
+                arrayOf(
+                    KVManager.virtualize("<img src='$image' alt='' />"),
+                    KVManager.virtualize(separator),
+                    translatedLabel
+                )
+            }
         } else {
             arrayOf(translatedLabel)
         }
@@ -842,8 +858,12 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent(), Component
  *
  * It takes the same parameters as the constructor of the built component.
  */
-fun Container.widget(classes: Set<String> = setOf(), init: (Widget.() -> Unit)? = null): Widget {
-    val widget = Widget(classes).apply { init?.invoke(this) }
+fun Container.widget(
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Widget.() -> Unit)? = null
+): Widget {
+    val widget = Widget(classes ?: className.set).apply { init?.invoke(this) }
     this.add(widget)
     return widget
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
index 1d5ada90..aec7c7ab 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.core
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 /**
  * This class allows to wrap a component into separately styled DIV element.
@@ -63,10 +64,11 @@ open class WidgetWrapper(internal var wrapped: Component?, classes: Set<String>
  */
 fun Container.widgetWrapper(
     wrapped: Component?,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (WidgetWrapper.() -> Unit)? = null
 ): WidgetWrapper {
-    val widgetWrapper = WidgetWrapper(wrapped, classes).apply { init?.invoke(this) }
+    val widgetWrapper = WidgetWrapper(wrapped, classes ?: className.set).apply { init?.invoke(this) }
     this.add(widgetWrapper)
     return widgetWrapper
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
index 8413eb3c..e9be793c 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
@@ -25,6 +25,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.utils.set
 
 /**
  * Helper class for HTML label element.
@@ -37,7 +38,7 @@ import pl.treksoft.kvision.html.Tag
  */
 open class FieldLabel(
     internal val forId: String, content: String? = null, rich: Boolean = false,
-    classes: Set<String> = setOf("control-label")
+    classes: Set<String> = setOf()
 ) : Tag(
     TAG.LABEL,
     content, rich, classes = classes
@@ -55,9 +56,11 @@ open class FieldLabel(
  */
 fun Container.fieldLabel(
     forId: String, content: String? = null, rich: Boolean = false,
-    classes: Set<String> = setOf("control-label"), init: (FieldLabel.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (FieldLabel.() -> Unit)? = null
 ): FieldLabel {
-    val fieldLabel = FieldLabel(forId, content, rich, classes).apply { init?.invoke(this) }
+    val fieldLabel = FieldLabel(forId, content, rich, classes ?: className.set).apply { init?.invoke(this) }
     this.add(fieldLabel)
     return fieldLabel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index 8f918a97..7353179a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -33,6 +33,7 @@ import pl.treksoft.kvision.html.Div
 import pl.treksoft.kvision.panel.FieldsetPanel
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.types.KFile
+import pl.treksoft.kvision.utils.set
 import kotlin.js.Date
 import kotlin.js.Json
 import kotlin.reflect.KClass
@@ -504,11 +505,13 @@ open class FormPanel<K : Any>(
 inline fun <reified K : Any> Container.formPanel(
     method: FormMethod? = null, action: String? = null, enctype: FormEnctype? = null,
     type: FormType? = null, condensed: Boolean = false,
-    horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2, classes: Set<String> = setOf(),
+    horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2,
+    classes: Set<String>? = null, className: String? = null,
     customSerializers: Map<KClass<*>, KSerializer<*>>? = null,
     noinline init: (FormPanel<K>.() -> Unit)? = null
 ): FormPanel<K> {
-    val formPanel = create<K>(method, action, enctype, type, condensed, horizRatio, classes, customSerializers)
+    val formPanel =
+        create<K>(method, action, enctype, type, condensed, horizRatio, classes ?: className.set, customSerializers)
     init?.invoke(formPanel)
     this.add(formPanel)
     return formPanel
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt
index ea8bf7db..5b91d635 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.check
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * The basic input component rendered as HTML *input type="checkbox"*.
@@ -42,9 +43,11 @@ open class CheckBoxInput(
  */
 fun Container.checkBoxInput(
     value: Boolean = false,
-    classes: Set<String> = setOf(), init: (CheckInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (CheckInput.() -> Unit)? = null
 ): CheckBoxInput {
-    val checkBoxInput = CheckBoxInput(value, classes).apply { init?.invoke(this) }
+    val checkBoxInput = CheckBoxInput(value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(checkBoxInput)
     return checkBoxInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
index b162abc8..234f5327 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
@@ -117,7 +117,7 @@ open class RadioGroup(
 
     private val idc = "kv_form_radiogroup_$counter"
     final override val input = RadioInput()
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     internal val container = SimplePanel(setOf("kv-radiogroup-container"))
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt
index 72bb4cd0..1f8a3b9d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.check
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * The basic input component rendered as HTML *input type="radio"*.
@@ -42,9 +43,11 @@ open class RadioInput(
  */
 fun Container.radioInput(
     value: Boolean = false,
-    classes: Set<String> = setOf(), init: (CheckInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (CheckInput.() -> Unit)? = null
 ): RadioInput {
-    val checkBoxInput = RadioInput(value, classes).apply { init?.invoke(this) }
+    val checkBoxInput = RadioInput(value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(checkBoxInput)
     return checkBoxInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt b/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt
index a54ccddb..dc8e57a0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt
@@ -140,7 +140,7 @@ open class Range(
         this.id = idc
         this.name = name
     }
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt
index dc9ad7d4..4649c654 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt
@@ -30,6 +30,7 @@ import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.FormInput
 import pl.treksoft.kvision.form.InputSize
 import pl.treksoft.kvision.form.ValidationStatus
+import pl.treksoft.kvision.utils.set
 
 internal const val DEFAULT_STEP = 1
 
@@ -52,6 +53,7 @@ open class RangeInput(
      * Range input value.
      */
     var value by refreshOnUpdate(value ?: (min as Number?)) { refreshState() }
+
     /**
      * The value attribute of the generated HTML input element.
      *
@@ -59,38 +61,47 @@ open class RangeInput(
      * bound to the range input value.
      */
     var startValue by refreshOnUpdate(value) { this.value = it; refresh() }
+
     /**
      * Minimal value.
      */
     var min by refreshOnUpdate(min)
+
     /**
      * Maximal value.
      */
     var max by refreshOnUpdate(max)
+
     /**
      * Step value.
      */
     var step by refreshOnUpdate(step)
+
     /**
      * The name attribute of the generated HTML input element.
      */
     override var name: String? by refreshOnUpdate()
+
     /**
      * Determines if the field is disabled.
      */
     override var disabled by refreshOnUpdate(false)
+
     /**
      * Determines if the range input is automatically focused.
      */
     var autofocus: Boolean? by refreshOnUpdate()
+
     /**
      * Determines if the range input is read-only.
      */
     var readonly: Boolean? by refreshOnUpdate()
+
     /**
      * The size of the input.
      */
     override var size: InputSize? by refreshOnUpdate()
+
     /**
      * The validation status of the input.
      */
@@ -221,9 +232,11 @@ open class RangeInput(
  */
 fun Container.rangeInput(
     value: Number? = null, min: Number = 0, max: Number = 100, step: Number = DEFAULT_STEP,
-    classes: Set<String> = setOf(), init: (RangeInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (RangeInput.() -> Unit)? = null
 ): RangeInput {
-    val rangeInput = RangeInput(value, min, max, step, classes).apply { init?.invoke(this) }
+    val rangeInput = RangeInput(value, min, max, step, classes ?: className.set).apply { init?.invoke(this) }
     this.add(rangeInput)
     return rangeInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
index 4d47a239..e797e050 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
@@ -116,7 +116,7 @@ open class SimpleSelect(
         this.id = idc
         this.name = name
     }
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
index bc99f514..63eb98b5 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
@@ -31,6 +31,7 @@ import pl.treksoft.kvision.form.ValidationStatus
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 internal const val KVNULL = "#kvnull"
 
@@ -57,6 +58,7 @@ open class SimpleSelectInput(
      * Text input value.
      */
     var value by refreshOnUpdate(value) { refreshState() }
+
     /**
      * The value of the selected child option.
      *
@@ -64,26 +66,32 @@ open class SimpleSelectInput(
      * bound to the select component.
      */
     var startValue by refreshOnUpdate(value) { this.value = it; selectOption() }
+
     /**
      * The name attribute of the generated HTML input element.
      */
     override var name: String? by refreshOnUpdate()
+
     /**
      * Determines if the field is disabled.
      */
     override var disabled by refreshOnUpdate(false)
+
     /**
      * Determines if the text input is automatically focused.
      */
     var autofocus: Boolean? by refreshOnUpdate()
+
     /**
      * Determines if an empty option is automatically generated.
      */
     var emptyOption by refreshOnUpdate(emptyOption) { setChildrenFromOptions() }
+
     /**
      * The size of the input.
      */
     override var size: InputSize? by refreshOnUpdate()
+
     /**
      * The validation status of the input.
      */
@@ -208,9 +216,12 @@ open class SimpleSelectInput(
  */
 fun Container.simpleSelectInput(
     options: List<StringPair>? = null, value: String? = null, emptyOption: Boolean = false,
-    classes: Set<String> = setOf(), init: (SimpleSelectInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (SimpleSelectInput.() -> Unit)? = null
 ): SimpleSelectInput {
-    val simpleSelectInput = SimpleSelectInput(options, value, emptyOption, classes).apply { init?.invoke(this) }
+    val simpleSelectInput =
+        SimpleSelectInput(options, value, emptyOption, classes ?: className.set).apply { init?.invoke(this) }
     this.add(simpleSelectInput)
     return simpleSelectInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt
index d887e814..8a5acf8b 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt
@@ -113,7 +113,7 @@ abstract class AbstractText(label: String? = null, rich: Boolean = false) :
      */
     protected val idc = "kv_form_text_$counter"
     abstract override val input: AbstractTextInput
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
index acad7853..9503a0b1 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.form.text
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.utils.set
 
 /**
  * Basic textarea component.
@@ -41,10 +42,12 @@ open class TextAreaInput(cols: Int? = null, rows: Int? = null, value: String? =
      * Number of columns.
      */
     var cols by refreshOnUpdate(cols)
+
     /**
      * Number of rows.
      */
     var rows by refreshOnUpdate(rows)
+
     /**
      * Determines if hard wrapping is enabled for the textarea element.
      */
@@ -77,10 +80,12 @@ open class TextAreaInput(cols: Int? = null, rows: Int? = null, value: String? =
  * It takes the same parameters as the constructor of the built component.
  */
 fun Container.textAreaInput(
-    cols: Int? = null, rows: Int? = null, value: String? = null, classes: Set<String> = setOf(),
+    cols: Int? = null, rows: Int? = null, value: String? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (TextAreaInput.() -> Unit)? = null
 ): TextAreaInput {
-    val textAreaInput = TextAreaInput(cols, rows, value, classes).apply { init?.invoke(this) }
+    val textAreaInput = TextAreaInput(cols, rows, value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(textAreaInput)
     return textAreaInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
index d057dcbd..e50e1b30 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.form.text
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.utils.set
 
 /**
  * Text input types.
@@ -53,6 +54,7 @@ open class TextInput(type: TextInputType = TextInputType.TEXT, value: String? =
      * Text input type.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * Determines if autocomplete is enabled for the input element.
      */
@@ -85,10 +87,12 @@ open class TextInput(type: TextInputType = TextInputType.TEXT, value: String? =
  * It takes the same parameters as the constructor of the built component.
  */
 fun Container.textInput(
-    type: TextInputType = TextInputType.TEXT, value: String? = null, classes: Set<String> = setOf(),
+    type: TextInputType = TextInputType.TEXT, value: String? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (TextInput.() -> Unit)? = null
 ): TextInput {
-    val textInput = TextInput(type, value, classes).apply { init?.invoke(this) }
+    val textInput = TextInput(type, value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(textInput)
     return textInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt b/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt
index 10e8e82f..e21b4f85 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *b*.
@@ -57,10 +58,11 @@ fun Container.bold(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Bold.() -> Unit)? = null
 ): Bold {
-    val bold = Bold(content, rich, align, classes).apply { init?.invoke(this) }
+    val bold = Bold(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(bold)
     return bold
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
index 44a9a8f3..65527f94 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
@@ -28,6 +28,7 @@ import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Button styles.
@@ -88,30 +89,37 @@ open class Button(
      * Button label.
      */
     var text by refreshOnUpdate(text)
+
     /**
      * Button icon.
      */
     var icon by refreshOnUpdate(icon)
+
     /**
      * Button style.
      */
     var style by refreshOnUpdate(style)
+
     /**
      * Button types.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * Determines if button is disabled.
      */
     var disabled by refreshOnUpdate(disabled)
+
     /**
      * Button image.
      */
     var image: ResString? by refreshOnUpdate()
+
     /**
      * Button size.
      */
     var size: ButtonSize? by refreshOnUpdate()
+
     /**
      * Determines if the button takes all the space horizontally.
      */
@@ -155,6 +163,7 @@ open class Button(
         }
         return this
     }
+
     /**
      * Makes the button focused.
      */
@@ -181,10 +190,11 @@ fun Container.button(
     style: ButtonStyle = ButtonStyle.PRIMARY,
     type: ButtonType = ButtonType.BUTTON,
     disabled: Boolean = false,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Button.() -> Unit)? = null
 ): Button {
-    val button = Button(text, icon, style, type, disabled, classes).apply { init?.invoke(this) }
+    val button = Button(text, icon, style, type, disabled, classes ?: className.set).apply { init?.invoke(this) }
     this.add(button)
     return button
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt b/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt
index 840d5dc7..6d3943ca 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt
@@ -27,6 +27,7 @@ import org.w3c.dom.HTMLCanvasElement
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Canvas component.
@@ -43,6 +44,7 @@ open class Canvas(
      * The width of the canvas.
      */
     var canvasWidth by refreshOnUpdate(canvasWidth)
+
     /**
      * The height of the canvas.
      */
@@ -84,11 +86,13 @@ open class Canvas(
  * It takes the same parameters as the constructor of the built component.
  */
 fun Container.canvas(
-    canvasWidth: Int? = null, canvasHeight: Int? = null, classes: Set<String> = setOf(),
+    canvasWidth: Int? = null, canvasHeight: Int? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Canvas.() -> Unit)? = null
 ): Canvas {
     val canvas =
-        Canvas(canvasWidth, canvasHeight, classes).apply { init?.invoke(this) }
+        Canvas(canvasWidth, canvasHeight, classes ?: className.set).apply { init?.invoke(this) }
     this.add(canvas)
     return canvas
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt b/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt
index 34910205..f922d0e0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.html
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * HTML custom tag component.
@@ -71,11 +72,13 @@ fun Container.customTag(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     attributes: Map<String, String> = mapOf(),
     init: (CustomTag.() -> Unit)? = null
 ): CustomTag {
-    val customTag = CustomTag(elementName, content, rich, align, classes, attributes).apply { init?.invoke(this) }
+    val customTag =
+        CustomTag(elementName, content, rich, align, classes ?: className.set, attributes).apply { init?.invoke(this) }
     this.add(customTag)
     return customTag
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Div.kt b/src/main/kotlin/pl/treksoft/kvision/html/Div.kt
index 2ffabe49..e43043e4 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Div.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Div.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *div*.
@@ -57,10 +58,11 @@ fun Container.div(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Div.() -> Unit)? = null
 ): Div {
-    val div = Div(content, rich, align, classes).apply { init?.invoke(this) }
+    val div = Div(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(div)
     return div
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt b/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
index c71e346f..87e6e43a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *footer*.
@@ -57,10 +58,11 @@ fun Container.footer(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Footer.() -> Unit)? = null
 ): Footer {
-    val footer = Footer(content, rich, align, classes).apply { init?.invoke(this) }
+    val footer = Footer(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(footer)
     return footer
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H1.kt b/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
index 6a3ac9cc..dbffb628 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h1*.
@@ -57,10 +58,11 @@ fun Container.h1(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H1.() -> Unit)? = null
 ): H1 {
-    val h1 = H1(content, rich, align, classes).apply { init?.invoke(this) }
+    val h1 = H1(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h1)
     return h1
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H2.kt b/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
index 7bdd3473..ad6fd793 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h2*.
@@ -57,10 +58,11 @@ fun Container.h2(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H2.() -> Unit)? = null
 ): H2 {
-    val h2 = H2(content, rich, align, classes).apply { init?.invoke(this) }
+    val h2 = H2(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h2)
     return h2
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H3.kt b/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
index 1a2efdbb..c21dcb33 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h3*.
@@ -57,10 +58,11 @@ fun Container.h3(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H3.() -> Unit)? = null
 ): H3 {
-    val h3 = H3(content, rich, align, classes).apply { init?.invoke(this) }
+    val h3 = H3(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h3)
     return h3
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H4.kt b/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
index ae00b8a7..903c53ae 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h4*.
@@ -57,10 +58,11 @@ fun Container.h4(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H4.() -> Unit)? = null
 ): H4 {
-    val h4 = H4(content, rich, align, classes).apply { init?.invoke(this) }
+    val h4 = H4(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h4)
     return h4
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H5.kt b/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
index c40a0658..f7f268d3 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h5*.
@@ -57,10 +58,11 @@ fun Container.h5(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H5.() -> Unit)? = null
 ): H5 {
-    val h5 = H5(content, rich, align, classes).apply { init?.invoke(this) }
+    val h5 = H5(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h5)
     return h5
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H6.kt b/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
index 048ab5df..1d9d3429 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h6*.
@@ -57,10 +58,11 @@ fun Container.h6(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H6.() -> Unit)? = null
 ): H6 {
-    val h6 = H6(content, rich, align, classes).apply { init?.invoke(this) }
+    val h6 = H6(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h6)
     return h6
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Header.kt b/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
index e62e884e..4f71a669 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *header*.
@@ -57,10 +58,11 @@ fun Container.header(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Header.() -> Unit)? = null
 ): Header {
-    val header = Header(content, rich, align, classes).apply { init?.invoke(this) }
+    val header = Header(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(header)
     return header
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt b/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt
index dad33ed4..f164f87d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt
@@ -26,6 +26,7 @@ import org.w3c.dom.Window
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Iframe sandbox options.
@@ -59,26 +60,32 @@ open class Iframe(
      * The iframe document address.
      */
     var src by refreshOnUpdate(src)
+
     /**
      * The HTML content of the iframe.
      */
     var srcdoc by refreshOnUpdate(srcdoc)
+
     /**
      * The name of the iframe.
      */
     var name by refreshOnUpdate(name)
+
     /**
      * The width of the iframe.
      */
     var iframeWidth by refreshOnUpdate(iframeWidth)
+
     /**
      * The height of the iframe.
      */
     var iframeHeight by refreshOnUpdate(iframeHeight)
+
     /**
      * A set of Sandbox options.
      */
     var sandbox by refreshOnUpdate(sandbox)
+
     /**
      * A current location URL of the iframe.
      */
@@ -141,11 +148,17 @@ open class Iframe(
  */
 fun Container.iframe(
     src: String? = null, srcdoc: String? = null, name: String? = null, iframeWidth: Int? = null,
-    iframeHeight: Int? = null, sandbox: Set<Sandbox>? = null, classes: Set<String> = setOf(),
+    iframeHeight: Int? = null, sandbox: Set<Sandbox>? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Iframe.() -> Unit)? = null
 ): Iframe {
     val iframe =
-        Iframe(src, srcdoc, name, iframeWidth, iframeHeight, sandbox, classes).apply { init?.invoke(this) }
+        Iframe(src, srcdoc, name, iframeWidth, iframeHeight, sandbox, classes ?: className.set).apply {
+            init?.invoke(
+                this
+            )
+        }
     this.add(iframe)
     return iframe
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
index 6496b042..f21d515f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Image shapes.
@@ -56,18 +57,22 @@ open class Image(
      * URL of the image.
      */
     var src by refreshOnUpdate(src)
+
     /**
      * The alternative text of the image.
      */
     var alt by refreshOnUpdate(alt)
+
     /**
      * Determines if the image is rendered as responsive.
      */
     var responsive by refreshOnUpdate(responsive)
+
     /**
      * The shape of the image.
      */
     var shape by refreshOnUpdate(shape)
+
     /**
      * Determines if the image is rendered as centered.
      */
@@ -108,9 +113,12 @@ open class Image(
  */
 fun Container.image(
     src: ResString, alt: String? = null, responsive: Boolean = false, shape: ImageShape? = null,
-    centered: Boolean = false, classes: Set<String> = setOf(), init: (Image.() -> Unit)? = null
+    centered: Boolean = false,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Image.() -> Unit)? = null
 ): Image {
-    val image = Image(src, alt, responsive, shape, centered, classes).apply { init?.invoke(this) }
+    val image = Image(src, alt, responsive, shape, centered, classes ?: className.set).apply { init?.invoke(this) }
     this.add(image)
     return image
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Li.kt b/src/main/kotlin/pl/treksoft/kvision/html/Li.kt
index 75157d60..d9886acd 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Li.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Li.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *li*.
@@ -57,10 +58,11 @@ fun Container.li(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Li.() -> Unit)? = null
 ): Li {
-    val li = Li(content, rich, align, classes).apply { init?.invoke(this) }
+    val li = Li(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(li)
     return li
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
index 2c2f1723..819a8aae 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 /**
  * Link component.
@@ -36,32 +37,52 @@ import pl.treksoft.kvision.panel.SimplePanel
  * @param url link URL address
  * @param icon link icon
  * @param image link image
+ * @param separator a separator between label and icon/image (defaults to space)
+ * @param labelFirst determines if the label is put before children elements (defaults to true)
  * @param classes a set of CSS class names
  */
 open class Link(
     label: String, url: String? = null, icon: String? = null, image: ResString? = null,
+    separator: String? = null, labelFirst: Boolean = true,
     classes: Set<String> = setOf()
 ) : SimplePanel(classes) {
     /**
      * Link label.
      */
     var label by refreshOnUpdate(label)
+
     /**
      * Link URL address.
      */
     var url by refreshOnUpdate(url)
+
     /**
      * Link icon.
      */
     var icon by refreshOnUpdate(icon)
+
     /**
      * Link image.
      */
     var image by refreshOnUpdate(image)
 
+    /**
+     * A separator between label and icon/image.
+     */
+    var separator by refreshOnUpdate(separator)
+
+    /**
+     * Determines if the label is put before children elements.
+     */
+    var labelFirst by refreshOnUpdate(labelFirst)
+
     override fun render(): VNode {
-        val t = createLabelWithIcon(label, icon, image)
-        return render("a", t + childrenVNodes())
+        val t = createLabelWithIcon(label, icon, image, separator)
+        return if (labelFirst) {
+            render("a", t + childrenVNodes())
+        } else {
+            render("a", childrenVNodes() + t)
+        }
     }
 
     override fun getSnAttrs(): List<StringPair> {
@@ -92,9 +113,13 @@ open class Link(
  */
 fun Container.link(
     label: String, url: String? = null, icon: String? = null, image: ResString? = null,
-    classes: Set<String> = setOf(), init: (Link.() -> Unit)? = null
+    separator: String? = null, labelFirst: Boolean = true,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Link.() -> Unit)? = null
 ): Link {
-    val link = Link(label, url, icon, image, classes).apply { init?.invoke(this) }
+    val link =
+        Link(label, url, icon, image, separator, labelFirst, classes ?: className.set).apply { init?.invoke(this) }
     this.add(link)
     return link
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt b/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt
index cdd18cfc..7484a667 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt
@@ -28,6 +28,7 @@ import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 import pl.treksoft.kvision.utils.snClasses
 import pl.treksoft.kvision.utils.snOpt
 
@@ -64,10 +65,12 @@ open class ListTag(
      * List type.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * List of elements.
      */
     var elements by refreshOnUpdate(elements)
+
     /**
      * Determines if [elements] can contain HTML code.
      */
@@ -158,9 +161,11 @@ open class ListTag(
  */
 fun Container.listTag(
     type: ListType, elements: List<String>? = null, rich: Boolean = false,
-    classes: Set<String> = setOf(), init: (ListTag.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (ListTag.() -> Unit)? = null
 ): ListTag {
-    val listTag = ListTag(type, elements, rich, classes, init)
+    val listTag = ListTag(type, elements, rich, classes ?: className.set, init)
     this.add(listTag)
     return listTag
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Main.kt b/src/main/kotlin/pl/treksoft/kvision/html/Main.kt
index 631e58a9..54c214b0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Main.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Main.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *main*.
@@ -57,10 +58,11 @@ fun Container.main(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Main.() -> Unit)? = null
 ): Main {
-    val main = Main(content, rich, align, classes).apply { init?.invoke(this) }
+    val main = Main(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(main)
     return main
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt b/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt
index 31addd95..5a774cf8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *nav*.
@@ -57,10 +58,11 @@ fun Container.nav(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Nav.() -> Unit)? = null
 ): Nav {
-    val nav = Nav(content, rich, align, classes).apply { init?.invoke(this) }
+    val nav = Nav(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(nav)
     return nav
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt b/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt
index 79aa93fb..76370d08 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *ol*.
@@ -51,9 +52,11 @@ open class Ol(
  */
 fun Container.ol(
     elements: List<String>? = null, rich: Boolean = false,
-    classes: Set<String> = setOf(), init: (Ol.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Ol.() -> Unit)? = null
 ): Ol {
-    val ol = Ol(elements, rich, classes).apply { init?.invoke(this) }
+    val ol = Ol(elements, rich, classes ?: className.set).apply { init?.invoke(this) }
     this.add(ol)
     return ol
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/P.kt b/src/main/kotlin/pl/treksoft/kvision/html/P.kt
index d5bb2c4d..c6daaa98 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/P.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/P.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *p*.
@@ -57,10 +58,11 @@ fun Container.p(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (P.() -> Unit)? = null
 ): P {
-    val p = P(content, rich, align, classes).apply { init?.invoke(this) }
+    val p = P(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(p)
     return p
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Section.kt b/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
index 43dd8fcf..b880e2fe 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *section*.
@@ -57,10 +58,11 @@ fun Container.section(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Section.() -> Unit)? = null
 ): Section {
-    val section = Section(content, rich, align, classes).apply { init?.invoke(this) }
+    val section = Section(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(section)
     return section
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Span.kt b/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
index 862d0b2f..c762824f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *span*.
@@ -57,10 +58,11 @@ fun Container.span(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Span.() -> Unit)? = null
 ): Span {
-    val span = Span(content, rich, align, classes).apply { init?.invoke(this) }
+    val span = Span(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(span)
     return span
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
index 95445ece..f133401d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.i18n.I18n
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 /**
  * HTML tags.
@@ -131,27 +132,33 @@ open class Tag(
      * Tag type.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * Text content of the tag.
      */
     override var content by refreshOnUpdate(content)
+
     /**
      * Determines if [content] can contain HTML code.
      */
     override var rich by refreshOnUpdate(rich)
+
     /**
      * Text align.
      */
     var align by refreshOnUpdate(align)
+
     /**
      * @suppress
      * Internal property
      */
     override var templateDataObj: Any? = null
+
     /**
      * Handlebars template.
      */
     override var template: ((Any?) -> String)? by refreshOnUpdate()
+
     /**
      * Handlebars templates for i18n.
      */
@@ -207,10 +214,12 @@ open class Tag(
  */
 fun Container.tag(
     type: TAG, content: String? = null, rich: Boolean = false, align: Align? = null,
-    classes: Set<String> = setOf(), attributes: Map<String, String> = mapOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
+    attributes: Map<String, String> = mapOf(),
     init: (Tag.() -> Unit)? = null
 ): Tag {
-    val tag = Tag(type, content, rich, align, classes, attributes, init)
+    val tag = Tag(type, content, rich, align, classes ?: className.set, attributes, init)
     this.add(tag)
     return tag
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt b/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt
index 9673f56d..21e548c8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *ul*.
@@ -51,9 +52,11 @@ open class Ul(
  */
 fun Container.ul(
     elements: List<String>? = null, rich: Boolean = false,
-    classes: Set<String> = setOf(), init: (Ul.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Ul.() -> Unit)? = null
 ): Ul {
-    val ul = Ul(elements, rich, classes).apply { init?.invoke(this) }
+    val ul = Ul(elements, rich, classes ?: className.set).apply { init?.invoke(this) }
     this.add(ul)
     return ul
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
index 59c61637..52239032 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.panel
 import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.utils.perc
+import pl.treksoft.kvision.utils.set
 
 /**
  * Dock layout directions.
@@ -50,21 +51,25 @@ open class DockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit
      * Internal property.
      */
     protected var leftComponent: Component? = null
+
     /**
      * @suppress
      * Internal property.
      */
     protected var centerComponent: Component? = null
+
     /**
      * @suppress
      * Internal property.
      */
     protected var rightComponent: Component? = null
+
     /**
      * @suppress
      * Internal property.
      */
     protected var upComponent: Component? = null
+
     /**
      * @suppress
      * Internal property.
@@ -83,6 +88,7 @@ open class DockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit
         @Suppress("MagicNumber")
         height = 100.perc
     }
+
     /**
      * @suppress
      * Internal property.
@@ -204,8 +210,12 @@ open class DockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit
  *
  * It takes the same parameters as the constructor of the built component.
  */
-fun Container.dockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit)? = null): DockPanel {
-    val dockPanel = DockPanel(classes, init)
+fun Container.dockPanel(
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (DockPanel.() -> Unit)? = null
+): DockPanel {
+    val dockPanel = DockPanel(classes ?: className.set, init)
     this.add(dockPanel)
     return dockPanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt
index 14310ffc..b6998556 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt
@@ -25,6 +25,7 @@ import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.utils.set
 
 /**
  * The HTML fieldset container.
@@ -74,10 +75,11 @@ open class FieldsetPanel(
  */
 fun Container.fieldsetPanel(
     legend: String? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (FieldsetPanel.() -> Unit)? = null
 ): FieldsetPanel {
-    val fieldsetPanel = FieldsetPanel(legend, classes, init)
+    val fieldsetPanel = FieldsetPanel(legend, classes ?: className.set, init)
     this.add(fieldsetPanel)
     return fieldsetPanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
index 4cdbfa01..13deaeb0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.core.WidgetWrapper
 import pl.treksoft.kvision.utils.px
+import pl.treksoft.kvision.utils.set
 
 /**
  * CSS flexbox directions.
@@ -237,9 +238,13 @@ open class FlexPanel(
 fun Container.flexPanel(
     direction: FlexDir? = null, wrap: FlexWrap? = null, justify: FlexJustify? = null,
     alignItems: FlexAlignItems? = null, alignContent: FlexAlignContent? = null,
-    spacing: Int? = null, classes: Set<String> = setOf(), init: (FlexPanel.() -> Unit)? = null
+    spacing: Int? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (FlexPanel.() -> Unit)? = null
 ): FlexPanel {
-    val flexPanel = FlexPanel(direction, wrap, justify, alignItems, alignContent, spacing, classes, init)
+    val flexPanel =
+        FlexPanel(direction, wrap, justify, alignItems, alignContent, spacing, classes ?: className.set, init)
     this.add(flexPanel)
     return flexPanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
index 1598753b..daf5c92b 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
@@ -25,6 +25,7 @@ import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.WidgetWrapper
+import pl.treksoft.kvision.utils.set
 
 /**
  * CSS grid justification options.
@@ -113,46 +114,57 @@ open class GridPanel(
      * CSS grid auto columns.
      */
     var autoColumns by refreshOnUpdate(autoColumns)
+
     /**
      * CSS grid auto rows.
      */
     var autoRows by refreshOnUpdate(autoRows)
+
     /**
      * CSS grid auto flow.
      */
     var autoFlow by refreshOnUpdate(autoFlow)
+
     /**
      * CSS grid columns template.
      */
     var templateColumns by refreshOnUpdate(templateColumns)
+
     /**
      * CSS grid rows template.
      */
     var templateRows by refreshOnUpdate(templateRows)
+
     /**
      * CSS grid areas template.
      */
     var templateAreas by refreshOnUpdate(templateAreas)
+
     /**
      * CSS grid column gap.
      */
     var columnGap by refreshOnUpdate(columnGap)
+
     /**
      * CSS grid row gap.
      */
     var rowGap by refreshOnUpdate(rowGap)
+
     /**
      * CSS grid items justification.
      */
     var justifyItems by refreshOnUpdate(justifyItems)
+
     /**
      * CSS grid items alignment.
      */
     var alignItems by refreshOnUpdate(alignItems)
+
     /**
      * CSS grid content justification.
      */
     var justifyContent by refreshOnUpdate(justifyContent)
+
     /**
      * CSS grid content alignment.
      */
@@ -267,11 +279,14 @@ fun Container.gridPanel(
     templateColumns: String? = null, templateRows: String? = null, templateAreas: List<String>? = null,
     columnGap: Int? = null, rowGap: Int? = null, justifyItems: GridJustify? = null,
     alignItems: GridAlign? = null, justifyContent: GridJustifyContent? = null,
-    alignContent: GridAlignContent? = null, classes: Set<String> = setOf(), init: (GridPanel.() -> Unit)? = null
+    alignContent: GridAlignContent? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (GridPanel.() -> Unit)? = null
 ): GridPanel {
     val gridPanel = GridPanel(
         autoColumns, autoRows, autoFlow, templateColumns, templateRows, templateAreas,
-        columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, classes, init
+        columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, classes ?: className.set, init
     )
     this.add(gridPanel)
     return gridPanel
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
index ccc77b0f..88c95b92 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * The container with horizontal layout.
@@ -59,10 +60,11 @@ fun Container.hPanel(
     justify: FlexJustify? = null,
     alignItems: FlexAlignItems? = null,
     spacing: Int? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (HPanel.() -> Unit)? = null
 ): HPanel {
-    val hpanel = HPanel(wrap, justify, alignItems, spacing, classes, init)
+    val hpanel = HPanel(wrap, justify, alignItems, spacing, classes ?: className.set, init)
     this.add(hpanel)
     return hpanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt
index 915fa6a7..f2210550 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt
@@ -25,6 +25,7 @@ import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Basic container class, rendered as a DIV element with all children directly within.
@@ -108,8 +109,12 @@ open class SimplePanel(classes: Set<String> = setOf(), init: (SimplePanel.() ->
  *
  * It takes the same parameters as the constructor of the built component.
  */
-fun Container.simplePanel(classes: Set<String> = setOf(), init: (SimplePanel.() -> Unit)? = null): SimplePanel {
-    val simplePanel = SimplePanel(classes, init)
+fun Container.simplePanel(
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (SimplePanel.() -> Unit)? = null
+): SimplePanel {
+    val simplePanel = SimplePanel(classes ?: className.set, init)
     this.add(simplePanel)
     return simplePanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
index c7f4b3ac..f838e85c 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
@@ -30,6 +30,7 @@ import pl.treksoft.kvision.core.UNIT
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
 import pl.treksoft.kvision.utils.obj
+import pl.treksoft.kvision.utils.set
 
 /**
  * Split panel direction.
@@ -107,9 +108,11 @@ open class SplitPanel(
  */
 fun Container.splitPanel(
     direction: Direction = Direction.VERTICAL,
-    classes: Set<String> = setOf(), init: (SplitPanel.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (SplitPanel.() -> Unit)? = null
 ): SplitPanel {
-    val splitPanel = SplitPanel(direction, classes, init)
+    val splitPanel = SplitPanel(direction, classes ?: className.set, init)
     this.add(splitPanel)
     return splitPanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt
index 84fb6174..02a77b55 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt
@@ -25,6 +25,7 @@ import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.routing.routing
+import pl.treksoft.kvision.utils.set
 import kotlin.browser.window
 
 /**
@@ -130,9 +131,12 @@ open class StackPanel(
  * It takes the same parameters as the constructor of the built component.
  */
 fun Container.stackPanel(
-    activateLast: Boolean = true, classes: Set<String> = setOf(), init: (StackPanel.() -> Unit)? = null
+    activateLast: Boolean = true,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (StackPanel.() -> Unit)? = null
 ): StackPanel {
-    val stackPanel = StackPanel(activateLast, classes, init)
+    val stackPanel = StackPanel(activateLast, classes ?: className.set, init)
     this.add(stackPanel)
     return stackPanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
index e5d275d4..42471994 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * The container with vertical layout.
@@ -55,9 +56,11 @@ open class VPanel(
  */
 fun Container.vPanel(
     justify: FlexJustify? = null, alignItems: FlexAlignItems? = null, spacing: Int? = null,
-    classes: Set<String> = setOf(), init: (VPanel.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (VPanel.() -> Unit)? = null
 ): VPanel {
-    val vpanel = VPanel(justify, alignItems, spacing, classes, init)
+    val vpanel = VPanel(justify, alignItems, spacing, classes ?: className.set, init)
     this.add(vpanel)
     return vpanel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt b/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt
index 4cf72f77..467f1d1d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.table
 import pl.treksoft.kvision.html.Align
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.utils.set
 
 /**
  * HTML table cell component.
@@ -58,9 +59,11 @@ fun Row.cell(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(), init: (Cell.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Cell.() -> Unit)? = null
 ): Cell {
-    val cell = Cell(content, rich, align, classes, init)
+    val cell = Cell(content, rich, align, classes ?: className.set, init)
     this.add(cell)
     return cell
 }
@@ -74,9 +77,11 @@ fun Row.thcell(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(), init: (HeaderCell.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (HeaderCell.() -> Unit)? = null
 ): HeaderCell {
-    val headerCell = HeaderCell(content, rich, align, Scope.ROW, classes, init)
+    val headerCell = HeaderCell(content, rich, align, Scope.ROW, classes ?: className.set, init)
     this.add(headerCell)
     return headerCell
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt b/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt
index f7f45784..626ab87f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.table
 import pl.treksoft.kvision.html.Align
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.utils.set
 
 enum class Scope(internal val scope: String) {
     ROW("row"),
@@ -69,9 +70,11 @@ fun Row.headerCell(
     rich: Boolean = false,
     align: Align? = null,
     scope: Scope? = null,
-    classes: Set<String> = setOf(), init: (HeaderCell.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (HeaderCell.() -> Unit)? = null
 ): HeaderCell {
-    val cell = HeaderCell(content, rich, align, scope, classes, init)
+    val cell = HeaderCell(content, rich, align, scope, classes ?: className.set, init)
     this.add(cell)
     return cell
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/table/Row.kt b/src/main/kotlin/pl/treksoft/kvision/table/Row.kt
index 0681953f..a933d38e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/table/Row.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/table/Row.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.table
 
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.utils.set
 
 /**
  * HTML table row component.
@@ -46,9 +47,11 @@ open class Row(classes: Set<String> = setOf(), init: (Row.() -> Unit)? = null) :
  * It takes the same parameters as the constructor of the built component.
  */
 fun Table.row(
-    classes: Set<String> = setOf(), init: (Row.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Row.() -> Unit)? = null
 ): Row {
-    val row = Row(classes, init)
+    val row = Row(classes ?: className.set, init)
     this.add(row)
     return row
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/table/Table.kt b/src/main/kotlin/pl/treksoft/kvision/table/Table.kt
index 6c48157d..56d4a811 100644
--- a/src/main/kotlin/pl/treksoft/kvision/table/Table.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/table/Table.kt
@@ -29,6 +29,7 @@ import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 import pl.treksoft.kvision.utils.snClasses
 import pl.treksoft.kvision.utils.snOpt
 
@@ -85,14 +86,17 @@ open class Table(
      * Table headers names.
      */
     var headerNames by refreshOnUpdate(headerNames) { refreshHeaders() }
+
     /**
      * Table types.
      */
     var types by refreshOnUpdate(types)
+
     /**
      * Table caption.
      */
     var caption by refreshOnUpdate(caption)
+
     /**
      * Determines if the table is responsive.
      */
@@ -210,10 +214,13 @@ open class Table(
 fun Container.table(
     headerNames: List<String>? = null,
     types: Set<TableType> = setOf(), caption: String? = null, responsiveType: ResponsiveType? = null,
-    theadType: TheadType? = null, classes: Set<String> = setOf(), init: (Table.() -> Unit)? = null
+    theadType: TheadType? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Table.() -> Unit)? = null
 ): Table {
     val table =
-        Table(headerNames, types, caption, responsiveType, theadType, classes, init)
+        Table(headerNames, types, caption, responsiveType, theadType, classes ?: className.set, init)
     this.add(table)
     return table
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt b/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt
index 5f245fb6..e2833630 100644
--- a/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt
@@ -200,3 +200,11 @@ fun <T> MutableList<T>.syncWithList(list: List<T>) {
         }
     }
 }
+
+/**
+ * Utility extension property to generate a set of strings to simplify the notation when using classes parameter.
+ */
+val String?.set: Set<String>
+    get() {
+        return this?.split(Regex("\\s+"))?.toSet() ?: setOf()
+    }
-- 
cgit