diff --git a/assets/config/toolkit.config.css b/assets/config/toolkit.config.css
index 9c58b75..71b908a 100644
--- a/assets/config/toolkit.config.css
+++ b/assets/config/toolkit.config.css
@@ -6,11 +6,11 @@
     --kit-color-error-w2: hsl(0, 100%, 65%);
     --kit-color-error-w1: hsl(0, 100%, 60%);
     --kit-color-error: hsl(0, 100%, 55%);
-    --kit-color-error-b1: hsl(0, 100%, 50%);
-    --kit-color-error-b2: hsl(0, 100%, 45%);
-    --kit-color-error-b3: hsl(0, 100%, 40%);
-    --kit-color-error-b4: hsl(0, 100%, 35%);
-    --kit-color-error-b5: hsl(0, 100%, 30%);
+    --kit-color-error-b1: hsl(0, 100%, 48%);
+    --kit-color-error-b2: hsl(0, 100%, 41%);
+    --kit-color-error-b3: hsl(0, 100%, 34%);
+    --kit-color-error-b4: hsl(0, 100%, 30%);
+    --kit-color-error-b5: hsl(0, 100%, 25%);
 
     --kit-color-error-text: #FFF;
 
diff --git a/assets/toolkit/toolkit.css b/assets/toolkit/toolkit.css
index a778f78..5c2587c 100644
--- a/assets/toolkit/toolkit.css
+++ b/assets/toolkit/toolkit.css
@@ -34,12 +34,7 @@
 .kit-field--text {
 
 }
-input[type="color"] ~ .kit-field__color {
-    display: flex;
-}
-.kit-field__color {
-    display: none;
-}
+
 .kit-field__color {
     display: none;
 }
@@ -54,6 +49,39 @@ input[type="color"] ~ .kit-field__color {
     display: none;
 }
 
+.kit-field input[type="color"] ~ .kit-field__color {
+    display: flex;
+    flex: 1 1 auto;
+    order: 110;
+}
+
+.kit-field input[type="color"] {
+    height: calc(1.5em + var(--kit-field-line-padding));
+    flex: 0 0 calc(1.5em + var(--kit-field-line-padding));
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    border: none;
+}
+
+.kit-field input[type="color"]::-webkit-color-swatch {
+    border-radius: 3px;
+    padding: 0;
+    border: 1px solid rgba(26, 26, 26, 0.40);
+}
+.kit-field input[type="color"]::-moz-color-swatch {
+    border-radius: 3px;
+    padding: 0;
+    border: 1px solid rgba(26, 26, 26, 0.40);
+}
+.kit-field input[type="color"]::-webkit-color-swatch-wrapper{
+
+}
+.kit-field input[type="color"]::-moz-color-swatch-wrapper {
+
+}
 
 .kit-field input[type="radio"]:checked ~ .kit-field__hr {
 
@@ -828,6 +856,16 @@ input[type="color"] ~ .kit-field__color {
     transition: inherit;
 }
 
+.kit-button.kit-button--icon {
+    padding: 0 0.75em;
+}
+.kit-button.kit-button--icon .kit-button__label {
+    display: none;
+}
+.kit-button.kit-button--icon .kit-button__icon {
+    margin: 0;
+}
+
 .kit-button__border {
     pointer-events: none;
     position: absolute;
diff --git a/templates/button.php b/templates/button.php
index 786e9c9..dd1f88a 100644
--- a/templates/button.php
+++ b/templates/button.php
@@ -18,7 +18,7 @@ $preloader = Tools::isTrue($arParams['PRELOADER']);
     aria-label="<?=$arParams['LABEL']?>"
     type="<?=$arParams['TYPE']?:'button'?>"
     <?if($arParams['ID']){?>id="<?=$arParams['ID']?>"<?}?>
-    <?if($arParams['TITLE']){?>title="<?=$arParams['TITLE']?>"<?}?>
+    <?if(1){?>title="<?=TemplaterTools::safeHtmlAttr($arParams['LABEL']?:$arParams['TITLE']?:$arParams['NAME']?:'')?>"<?}?>
     <?if($arParams['NAME']){?>name="<?=$arParams['NAME']?>"<?}?>
     <?if($arParams['ENTITY']){?>data-entity="<?=$arParams['ENTITY']?>"<?}?>
     <?if($arParams['VALUE']){?>value="<?=$arParams['VALUE']?>"<?}?>
@@ -26,7 +26,7 @@ $preloader = Tools::isTrue($arParams['PRELOADER']);
     onclick="<?=TemplaterTools::safeHtmlAttr($arParams['ONCLICK'])?>"
     <?=TemplaterTools::getAttrByArray($arParams['ATTR']);?>
 ><div class="kit-button__icon kit-icon"><?=$arParams['ICON']?></div>
-    <div class="kit-button__label kit-line-clamp"><?=$arParams['LABEL']?:$arParams['NAME']?:''?></div>
+    <div class="kit-button__label kit-line-clamp"><?=$arParams['LABEL']?:$arParams['TITLE']?:$arParams['NAME']?:''?></div>
     <div class="kit-button__border"></div>
 <?if($preloader){?><span class="circle-preloader"></span><?}?>
 </button><?
diff --git a/tests/cheatsheetTest.php b/tests/cheatsheetTest.php
index 84168f9..4e884f0 100644
--- a/tests/cheatsheetTest.php
+++ b/tests/cheatsheetTest.php
@@ -196,9 +196,16 @@ $APPLICATION->ShowHead();
 
     <h2>Modals</h2>
     <div class="d-flex justify-content-between flex-wrap">
-        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
-            Vertically centered scrollable modal
-        </button>
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Vertically centered scrollable modal',
+            'CLASS' => 'kit-button--primary kit-button--bordered',
+            'ATTR' => [
+                'data-bs-toggle' => 'modal',
+                'data-bs-target' => '#exampleModalCenteredScrollable',
+            ],
+        ]);
+        ?>
     </div>
     <?
     service()->templater()->render('kit:modal', [
@@ -214,19 +221,31 @@ $APPLICATION->ShowHead();
 
 
 
-    <h2>Inputs</h2>
+    <h2>Input type color</h2>
     <div class="flex-list" style="--col-count: 3">
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
                 'TYPE' => 'color',
                 'HINT' => 'color picker by xu-ui',
                 'NAME' => 'color',
-                'VALUE' => '',
+                'VALUE' => '#1a8cff',
                 'LABEL' => 'color',
             ]); ?>
         </div>
     </div>
+
+
+    <h2>Input type tel</h2>
     <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'tel',
+                'HINT' => 'phone',
+                'NAME' => 'phone',
+                'VALUE' => '+7800',
+                'LABEL' => 'phone',
+            ]); ?>
+        </div>
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
                 'TYPE' => 'tel',
@@ -236,6 +255,10 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'phone',
             ]); ?>
         </div>
+    </div>
+
+    <h2>Input type number</h2>
+    <div class="flex-list" style="--col-count: 3">
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
                 'TYPE' => 'number',
@@ -246,6 +269,180 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'number',
             ]); ?>
         </div>
+    </div>
+
+    <h2>Select</h2>
+    <div class="flex-list" style="--col-count: 3">
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:select', [
+                'HINT' => 'text hint',
+                'NAME' => 'select',
+                'LABEL' => 'select',
+                'OPTIONS' => [
+                    [
+                        'ID' => '1',
+                        'NAME' => 'Значение выпадающего списка 1',
+                    ],
+                    [
+                        'ID' => '2',
+                        'NAME' => 'Значение выпадающего списка 2',
+                    ],
+                    [
+                        'ID' => '3',
+                        'NAME' => 'Значение выпадающего списка 3',
+                    ],
+                    [
+                        'ID' => '4',
+                        'NAME' => 'Значение выпадающего списка 4',
+                    ],
+                    [
+                        'ID' => '5',
+                        'NAME' => 'Значение выпадающего списка 5',
+                    ],
+                ]
+            ]); ?>
+        </div>
+    </div>
+
+
+    <h2>Input type checkbox</h2>
+    <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement2',
+                'VALUE' => 'Y',
+                'CHECKED' => true,
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement',
+                'VALUE' => 'Y',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement',
+                'VALUE' => 'Y',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+    </div>
+
+    <h2>Input type radio</h2>
+    <div class="flex-list" style="--col-count: 3">
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio1',
+                'CHECKED' => true,
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio2',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio3',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio4',
+                'CHECKED' => true,
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio5',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio6',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio7',
+                'CHECKED' => true,
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio8',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio9',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+    </div>
+
+
+    <h2>Input type text</h2>
+
+    <div class="flex-list" style="--col-count: 3">
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
                 'TYPE' => 'text',
@@ -283,155 +480,13 @@ $APPLICATION->ShowHead();
                 ]
             ]); ?>
         </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:select', [
-                'HINT' => 'text hint',
-                'NAME' => 'select',
-                'LABEL' => 'select',
-                'OPTIONS' => [
-                    [
-                        'ID' => '1',
-                        'NAME' => 'Значение выпадающего списка 1',
-                    ],
-                    [
-                        'ID' => '2',
-                        'NAME' => 'Значение выпадающего списка 2',
-                    ],
-                    [
-                        'ID' => '3',
-                        'NAME' => 'Значение выпадающего списка 3',
-                    ],
-                    [
-                        'ID' => '4',
-                        'NAME' => 'Значение выпадающего списка 4',
-                    ],
-                    [
-                        'ID' => '5',
-                        'NAME' => 'Значение выпадающего списка 5',
-                    ],
-                ]
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'checkbox',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'agreement2',
-                'VALUE' => 'Y',
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'checkbox',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'agreement',
-                'VALUE' => 'Y',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'checkbox',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'agreement',
-                'VALUE' => 'Y',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio',
-                'VALUE' => 'radio1',
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio',
-                'VALUE' => 'radio2',
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio',
-                'VALUE' => 'radio3',
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
 
 
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-stroke',
-                'VALUE' => 'radio4',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-stroke',
-                'VALUE' => 'radio5',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-stroke',
-                'VALUE' => 'radio6',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
+    </div>
 
+    <h2>Textarea</h2>
+    <div class="flex-list" style="--col-count: 3">
 
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-material',
-                'VALUE' => 'radio7',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-material',
-                'VALUE' => 'radio8',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-material',
-                'VALUE' => 'radio9',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
         <div class="flex-list-item"><?
             service()->templater()->render('kit:textarea', [
                 'CLASS' => 'kit-field--check-mark-stroke',
@@ -442,6 +497,7 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'textarea label',
             ]); ?>
         </div>
+
         <div class="flex-list-item"><?
             service()->templater()->render('kit:textarea', [
                 'CLASS' => 'kit-field--check-mark-stroke',
@@ -452,15 +508,10 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'textarea label',
             ]); ?>
         </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'tel',
-                'HINT' => 'phone',
-                'NAME' => 'phone',
-                'VALUE' => '+7800',
-                'LABEL' => 'phone',
-            ]); ?>
-        </div>
+    </div>
+
+    <h2>Input type file</h2>
+    <div class="flex-list" style="--col-count: 3">
         <div class="flex-list-item"><?
             $inputFile = new \Wt\Core\Form\InputFile($fieldName = 'FIELD_INPUT_FILE');
             $inputFile->multiple = true;
@@ -1086,6 +1137,616 @@ $APPLICATION->ShowHead();
         ]);
         echo '</div>';
 
+        /** ICON */
+
+        if(1){
+
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon test ',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon test ',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'default',
+                'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+            echo '<div class="flex-list-item">';
+
+
+
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'primary',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'secondary',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'error',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'warning',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+
+
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'success',
+                'CLASS' => 'kit-button--icon  kit-button--success kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+
+
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success kit-button--material',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--radius',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';echo '<div class="flex-list-item">';
+            service()->templater()->render('kit:button', [
+                'DISABLED' => true,
+                'LABEL' => 'disabled',
+                'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--round',
+                'ICON' => service()->templater()->get('kit:svg/star'),
+            ]);
+            echo '</div>';
+        }
+
         ?>
     </div>