BX.KIT FRONT-END FRAMEWORK
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.
Tooltip
templater()->render('kit:button', [
'LABEL' => 'Tooltip on top',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'top',
'title' => 'Tooltip on top'
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Tooltip on end',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'right',
'title' => 'Tooltip on end'
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Tooltip on bottom',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'bottom',
'title' => 'Tooltip on bottom'
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Tooltip on start',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'left',
'title' => 'Tooltip on start'
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Tooltip with HTML',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-html' => 'true',
'title' => 'Tooltip with HTML '
]
]);
?>
Popover
templater()->render('kit:button', [
'LABEL' => 'Popover on top',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'top',
'data-bs-content' => 'Top popover',
'data-bs-container' => 'body',
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Popover on right',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'right',
'data-bs-content' => 'Right popover',
'data-bs-container' => 'body',
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Popover on bottom',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'bottom',
'data-bs-content' => 'Bottom popover',
'data-bs-container' => 'body',
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'Popover on left',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'left',
'data-bs-content' => 'Left popover',
'data-bs-container' => 'body',
]
]);
?>
templater()->render('kit:button', [
'LABEL' => htmlspecialchars(' & header'),
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. Right ?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'title' => 'Tooltip with HTML '
]
]);
?>
templater()->render('kit:button', [
'LABEL' => 'trigger focus',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. Right ?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'data-bs-trigger' => 'focus',
'title' => 'Tooltip with HTML '
]
]);
?>
Modals
Vertically centered scrollable modal
templater()->render('kit:modal', [
'ID' => 'exampleModalCenteredScrollable',
'TITLE' => 'Modal title',
'BODY' => '
This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.
This content should appear at the bottom after you scroll.
',
'FOOTER' => '
Close
Save changes ',
]);
?>
Inputs
templater()->render('kit:input', [
'TYPE' => 'color',
'HINT' => 'color picker by xu-ui',
'NAME' => 'color',
'VALUE' => '',
'LABEL' => 'color',
]); ?>
templater()->render('kit:input', [
'TYPE' => 'tel',
'HINT' => 'phone',
'NAME' => 'phone',
'VALUE' => '',
'LABEL' => 'phone',
]); ?>
templater()->render('kit:input', [
'TYPE' => 'number',
'HINT' => 'number',
'NAME' => 'number',
'VALUE' => '10',
'PLACEHOLDER' => 'number',
'LABEL' => 'number',
]); ?>
templater()->render('kit:input', [
'TYPE' => 'text',
'HINT' => 'time mask',
'NAME' => 'time_mask',
'VALUE' => '',
'PLACEHOLDER' => '',
'LABEL' => 'time mask',
'ATTR' => [
'data-mask' => '99:99'
]
]); ?>
templater()->render('kit:input', [
'TYPE' => 'text',
'HINT' => 'text hint',
'NAME' => 'input_name',
'VALUE' => '10',
'PLACEHOLDER' => 'number',
'LABEL' => 'Test input',
]); ?>
templater()->render('kit:input', [
'TYPE' => 'text',
'HINT' => 'air-datepicker',
'NAME' => 'datepicker',
'VALUE' => '',
'PLACEHOLDER' => '',
'LABEL' => 'datepicker',
'DATEPICKER' => true,
'ATTR' => [
'data-mask' => '99.99.9999'
]
]); ?>
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',
],
]
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
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',
]); ?>
templater()->render('kit:textarea', [
'CLASS' => 'kit-field--check-mark-stroke',
'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' => 'textarea',
'VALUE' => '',
'MAXLENGTH' => 1000,
'LABEL' => 'textarea label',
]); ?>
templater()->render('kit:textarea', [
'CLASS' => 'kit-field--check-mark-stroke',
//'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' => 'textarea',
'VALUE' => '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.',
'MAXLENGTH' => 1000,
'LABEL' => 'textarea label',
]); ?>
templater()->render('kit:input', [
'TYPE' => 'tel',
'HINT' => 'phone',
'NAME' => 'phone',
'VALUE' => '+7800',
'LABEL' => 'phone',
]); ?>
multiple = true;
$inputFile->hint = 'Поле для ввода файлов';
$inputFile->render();
?>
Buttons
bordered
bordered radius
bordered round
material
material radius
material round
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'test ',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'test ',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';echo '
';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '
';
?>