diff --git a/public_html/pages/component.php b/public_html/pages/component.php
index f8493894e02945c966df34462185845b106cc2fe..71ecbfa5b9e9b9c089983ba9d58051fb8623db0f 100644
--- a/public_html/pages/component.php
+++ b/public_html/pages/component.php
@@ -8,21 +8,37 @@ $sComponent=(isset($_GET['id']) ? preg_replace('/[^a-z]/', '', $_GET['id']) : ''
 
 $aPresets=[
 
-    'yesno'=>[
-        ''=>'no value', 
-        '0'=>'no', 
-        '1'=>'yes',
+    'colors'=>[
+        // https://adminlte.io/themes/v3/pages/UI/general.html
+        ''=>'no value',
+        'indigo'=>'indigo',
+        'lightblue'=>'',
+        'navy'=>'',
+        'purple'=>'',
+        'fuchsia'=>'',
+        'pink'=>'',
+        'maroon'=>'',
+        'orange'=>'',
+        'lime'=>'',
+        'teal'=>'',
+        'olive'=>'',
+
+        'black'=>'black',
+        'dark'=>'dark gray',
+        'gray'=>'gray', 
+        'light'=>'light gray', 
     ],
+
     'type'=>[
         ''=>'no value',
         'danger'=>'red',
-        'dark'=>'dark gray',
-        'gray'=>'gray', 
         'info'=>'aqua',
         'primary'=>'blue',
         'secondary'=>'gray',
         'success'=>'green',
         'warning'=>'yellow',
+        'dark'=>'dark gray',
+        'gray'=>'gray', 
     ],
     'shadow'=>[
         ''=>'no value', 
@@ -30,7 +46,13 @@ $aPresets=[
         'small'=>'small', 
         'regular'=>'regular',
         'large'=>'large'
-    ]
+    ],
+    // for keys: dismissable
+    'yesno'=>[
+        ''=>'no value', 
+        '0'=>'no', 
+        '1'=>'yes',
+    ],
 ];
 
 // ----------------------------------------------------------------------
@@ -45,10 +67,25 @@ $aComponents=[
         'method'=>'getAlert',
 
         'params'=>[
-            'type'        =>['select'=>$aPresets['type'],     'default'=>'warning'],
-            'dismissible' =>['select'=>$aPresets['yesno'],    'default'=>''],
-            'title'=>['default'=>' I need your attention'],
-            'text'=>['default'=>'Please check it. Maybe there is something wrong here.'],
+            'type'        => ['select'=>$aPresets['type'],     'default'=>'warning'],
+            'dismissible' => ['select'=>$aPresets['yesno'],    'default'=>''],
+            'title'       => ['default'=>'I need your attention'],
+            'text'        => ['default'=>'Please check it. Maybe there is something wrong here.'],
+        ]
+    ],
+    // ------------------------------------------------------------
+    'badge'=>[
+        'label'=>'Badge',
+        'description'=>'Tiny additional info; mostly as counter',
+        'method'=>'getBadge',
+
+        'params'=>[
+            'type'        => ['select'=>$aPresets['type'],     'default'=>'danger'],
+            'bgcolor'     => ['select'=>$aPresets['colors'],   'default'=>''],
+            'class'       => ['default'=>''],
+            'id'          => ['default'=>''],
+            'title'       => ['default'=>'Errors: 5'],
+            'text'        => ['default'=>'5'],
         ]
     ],
     // ------------------------------------------------------------
@@ -100,8 +137,9 @@ if(!isset($aComponents[$sComponent])){
                     ? $aParam['default']
                     : ''
         ));
-        $aWidgetOptions[$sOptionkey]=$sValue;
-
+        if($sValue!==''){
+            $aWidgetOptions[$sOptionkey]=$sValue;
+        }
         if (isset($aParam['select'])){
             foreach($aParam['select'] as $sSelectItem=>$sLabel){
                 // $sInput.='<option value="'.$sSelectItem.'">'.($sSelectItem ? $sSelectItem : '-- none --').'</option>';