@progress/kendo-themes-html 10.2.0-dev.1 → 10.2.0-dev.2

package/dist/esm/window/window.spec.mjs

@@ -9068,7 +9068,8 @@ var options96 = {
 };
 var defaultOptions96 = {
   size: Size.medium,
-  fillMode: FillMode.solid
+  fillMode: FillMode.solid,
+  scrollButtons: "around"
 };
 var Toolbar = (props) => {
   const {
@@ -9240,18 +9241,38 @@ var Toolbar = (props) => {
         {
           [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
           [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
-          [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: scrollable && (scrollButtons === "hidden" || !scrollButtons),
-          [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+          [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: scrollable && scrollButtons === "hidden",
+          [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== "both",
           [`${TOOLBAR_CLASSNAME}-section`]: section
         }
       ),
       children: [
         !scrollable && toolbarChildren,
-        scrollable && (scrollButtons === "hidden" || !scrollButtons) && /* @__PURE__ */ jsx351("span", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
+        scrollable && scrollButtons === "hidden" && /* @__PURE__ */ jsx351("span", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
         scrollable && scrollButtons === "start" && /* @__PURE__ */ jsxs157(Fragment115, { children: [
           /* @__PURE__ */ jsxs157(ButtonGroup, { children: [
-            /* @__PURE__ */ jsx351(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
-            /* @__PURE__ */ jsx351(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+            /* @__PURE__ */ jsx351("span", { className: classNames(
+              "k-toolbar-prev",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ jsx351(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
+            /* @__PURE__ */ jsx351("span", { className: classNames(
+              "k-toolbar-next",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ jsx351(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
           ] }),
           /* @__PURE__ */ jsx351(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ jsx351("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren })
@@ -9260,16 +9281,56 @@ var Toolbar = (props) => {
           /* @__PURE__ */ jsx351("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
           /* @__PURE__ */ jsx351(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ jsxs157(ButtonGroup, { children: [
-            /* @__PURE__ */ jsx351(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
-            /* @__PURE__ */ jsx351(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+            /* @__PURE__ */ jsx351("span", { className: classNames(
+              "k-toolbar-prev",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ jsx351(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
+            /* @__PURE__ */ jsx351("span", { className: classNames(
+              "k-toolbar-next",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ jsx351(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
           ] })
         ] }),
-        scrollable && scrollButtons === "around" && /* @__PURE__ */ jsxs157(Fragment115, { children: [
-          /* @__PURE__ */ jsx351(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
+        scrollable && (scrollButtons === "around" || !scrollButtons) && /* @__PURE__ */ jsxs157(Fragment115, { children: [
+          /* @__PURE__ */ jsx351("span", { className: classNames(
+            "k-toolbar-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode,
+              themeColor: ThemeColor.base,
+              rounded: Roundness.medium
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ jsx351(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
           /* @__PURE__ */ jsx351(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ jsx351("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
           /* @__PURE__ */ jsx351(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
-          /* @__PURE__ */ jsx351(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+          /* @__PURE__ */ jsx351("span", { className: classNames(
+            "k-toolbar-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode,
+              themeColor: ThemeColor.base,
+              rounded: Roundness.medium
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ jsx351(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
         ] })
       ]
     }
@@ -10225,15 +10286,35 @@ var TabStrip = (props) => {
           [`${TABSTRIP_CLASSNAME}-${position}`]: position,
           [`${TABSTRIP_CLASSNAME}-scrollable`]: scrollable,
           [`${TABSTRIP_CLASSNAME}-scrollable-overlay`]: scrollable && (scrollButtons === "hidden" || !scrollButtons),
-          [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition
+          [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== "both"
         },
         optionClassNames(TABSTRIP_CLASSNAME, { size })
       ),
       children: [
         position === "bottom" && children,
         /* @__PURE__ */ jsxs182(TabStripItemsWrapper, { orientation: orientationMap[position], children: [
-          scrollable && (scrollButtons === "around" || scrollButtons === "start") && /* @__PURE__ */ jsx395(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["prev"]}`, className: "k-tabstrip-prev" }),
-          scrollable && scrollButtons === "start" && /* @__PURE__ */ jsx395(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["next"]}`, className: "k-tabstrip-next" }),
+          scrollable && (scrollButtons === "around" || scrollButtons === "start") && /* @__PURE__ */ jsx395("span", { className: classNames(
+            "k-tabstrip-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ jsx395(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["prev"]}` }) }),
+          scrollable && scrollButtons === "start" && /* @__PURE__ */ jsx395("span", { className: classNames(
+            "k-tabstrip-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ jsx395(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["next"]}` }) }),
           /* @__PURE__ */ jsx395(
             TabStripItems,
             {
@@ -10242,8 +10323,28 @@ var TabStrip = (props) => {
               children: tabStripItems
             }
           ),
-          scrollable && scrollButtons === "end" && /* @__PURE__ */ jsx395(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["prev"]}`, className: "k-tabstrip-prev" }),
-          scrollable && (scrollButtons === "around" || scrollButtons === "end") && /* @__PURE__ */ jsx395(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["next"]}`, className: "k-tabstrip-next" })
+          scrollable && scrollButtons === "end" && /* @__PURE__ */ jsx395("span", { className: classNames(
+            "k-tabstrip-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ jsx395(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["prev"]}` }) }),
+          scrollable && (scrollButtons === "around" || scrollButtons === "end") && /* @__PURE__ */ jsx395("span", { className: classNames(
+            "k-tabstrip-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ jsx395(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["next"]}` }) })
         ] }),
         position !== "bottom" && children
       ]

package/dist/types/tabstrip/tabstrip.spec.d.ts

@@ -11,7 +11,7 @@ export type KendoTabStripProps = KendoTabStripOptions & {
     tabStripItems?: React.JSX.Element | React.JSX.Element[];
     scrollable?: boolean;
     scrollButtons?: "around" | "start" | "end" | "hidden";
-    scrollingPosition?: "start" | "end";
+    scrollingPosition?: "start" | "end" | "both";
     dir?: "rtl" | "ltr";
 };
 export declare const TabStrip: {

package/dist/types/toolbar/toolbar.spec.d.ts

@@ -12,7 +12,7 @@ export type KendoToolbarProps = KendoToolbarOptions & {
     resizable?: boolean;
     scrollable?: boolean;
     scrollButtons?: 'hidden' | 'start' | 'end' | 'around';
-    scrollingPosition?: 'start' | 'end';
+    scrollingPosition?: 'start' | 'end' | 'both';
     section?: boolean;
 };
 export type KendoToolbarState = {
@@ -29,6 +29,7 @@ export declare const Toolbar: {
     defaultOptions: {
         size: "medium";
         fillMode: "solid";
+        scrollButtons: string;
     };
 };
 export default Toolbar;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "10.2.0-dev.1",
+  "version": "10.2.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,5 +53,5 @@
   "devDependencies": {
     "@types/react": "^18.3.3"
   },
-  "gitHead": "d0b68833bec04a91798d4f90ad41a819401b13ce"
+  "gitHead": "7cacdcf5142972c051f1efeb0a7b1f2a9e11b0a2"
 }

package/src/prompt/prompt-view.tsx

@@ -31,7 +31,7 @@ export const PromptView = (
             { showSearch && <Textarea resize="y" rows={1} placeholder="Ask or generate content with AI"></Textarea> }
             { suggestions &&
                 <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Prompt Suggestions</IconTextButton>
+                    <IconTextButton fillMode={"flat"} icon="chevron-up">Prompt Suggestions</IconTextButton>
                     <div className="k-prompt-expander-content">
                         <>{suggestions}</>
                     </div>
@@ -39,7 +39,7 @@ export const PromptView = (
             }
             { settings &&
                 <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Settings</IconTextButton>
+                    <IconTextButton fillMode={"flat"} icon="chevron-up">Settings</IconTextButton>
                     <div className="k-prompt-expander-content">
                         {settings}
                     </div>

package/src/tabstrip/tabstrip.spec.tsx

@@ -1,5 +1,5 @@
-import { Button, TabStripItems, TabStripItemsWrapper } from '..';
-import { classNames, optionClassNames, Size } from '../misc';
+import { Icon, TabStripItems, TabStripItemsWrapper } from '..';
+import { classNames, FillMode, optionClassNames, Size, ThemeColor } from '../misc';
 
 export const TABSTRIP_CLASSNAME = `k-tabstrip`;
 
@@ -19,7 +19,7 @@ export type KendoTabStripProps = KendoTabStripOptions & {
     tabStripItems?: React.JSX.Element | React.JSX.Element[];
     scrollable?: boolean;
     scrollButtons?: "around" | "start" | "end" | "hidden";
-    scrollingPosition?: "start" | "end";
+    scrollingPosition?: "start" | "end" | "both";
     dir?: "rtl" | "ltr";
 };
 
@@ -80,7 +80,7 @@ export const TabStrip = (
                     [`${TABSTRIP_CLASSNAME}-${position}`]: position,
                     [`${TABSTRIP_CLASSNAME}-scrollable`]: scrollable,
                     [`${TABSTRIP_CLASSNAME}-scrollable-overlay`]: (scrollable && (scrollButtons === 'hidden' || !scrollButtons) ),
-                    [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition  && scrollingPosition !== 'both',
                 },
                 optionClassNames(TABSTRIP_CLASSNAME, {size})
             )}>
@@ -88,21 +88,69 @@ export const TabStrip = (
             <TabStripItemsWrapper orientation={orientationMap[position]}>
                 {scrollable &&
                     (scrollButtons === 'around' || scrollButtons === 'start') &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["prev"]}`} />
+                    </span>
                 }
                 {scrollable && scrollButtons === 'start' &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["next"]}`} />
+                    </span>
                 }
                 <TabStripItems className={classNames({[`k-tabstrip-items-scroll`]: scrollable && scrollButtons === 'hidden'})}
                 tabAlignment={tabAlignmentMap[tabAlignment]}>
                     {tabStripItems}
                 </TabStripItems>
                 {scrollable && scrollButtons === 'end' &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["prev"]}`} />
+                    </span>
                 }
                 {scrollable &&
                     (scrollButtons === 'around' || scrollButtons === 'end') &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["next"]}`} />
+                    </span>
                 }
             </TabStripItemsWrapper>
             {position !== "bottom" && children}

package/src/tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx

@@ -53,7 +53,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden scrollingPosition={null}
+                <TabStripScrollableButtonsHidden scrollingPosition="both"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
@@ -117,7 +117,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden position="left" scrollingPosition={null}
+                <TabStripScrollableButtonsHidden position="left" scrollingPosition="both"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
@@ -182,7 +182,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden scrollingPosition={null} dir="rtl"
+                <TabStripScrollableButtonsHidden scrollingPosition="both" dir="rtl"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />

package/src/toolbar/tests/toolbar-fill-modes.tsx

@@ -1,7 +1,7 @@
 import { Button } from '../../button';
 import { ColorPicker } from '../../colorpicker';
 import { ButtonGroup } from '../../button-group';
-import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollable } from '../../toolbar';
+import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollableButtonsHidden } from '../../toolbar';
 
 import { Combobox, MenuButton } from '../..';
 
@@ -52,7 +52,7 @@ export default () =>(
                     </section>
                     <span className="k-colspan-all k-col-span-full">{fillMode} with overlay</span>
                     <section className="k-colspan-all k-col-span-full">
-                      <ToolbarScrollable fillMode={fillMode}>
+                      <ToolbarScrollableButtonsHidden scrollingPosition="both" fillMode={fillMode}>
                           <Button icon="arrow-rotate-ccw" fillMode={fillMode}></Button>
                           <Button icon="arrow-rotate-cw" fillMode={fillMode}></Button>
                           <ToolbarSeparator></ToolbarSeparator>
@@ -88,7 +88,7 @@ export default () =>(
                           <MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
                           <ToolbarSeparator></ToolbarSeparator>
                           <Button fillMode={fillMode} icon="text-wrap"></Button>
-                      </ToolbarScrollable>
+                      </ToolbarScrollableButtonsHidden>
                     </section>
                 </>
             ))}

package/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx

@@ -17,12 +17,12 @@ export default () =>(
 
             <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle</span>
             <section className="k-colspan-all k-col-span-full">
-                <ToolbarScrollableButtonsHidden scrollingPosition={null} />
+                <ToolbarScrollableButtonsHidden scrollingPosition="both" />
             </section>
 
             <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle RTL</span>
             <section className="k-colspan-all k-col-span-full" dir="rtl">
-                <ToolbarScrollableButtonsHidden scrollingPosition={null} />
+                <ToolbarScrollableButtonsHidden scrollingPosition="both" />
             </section>
 
         </div>

package/src/toolbar/tests/toolbar-scrollable-buttons.tsx

@@ -7,7 +7,7 @@ export default () =>(
 
             <span className="k-colspan-all k-col-span-full">Toolbar Buttons Around</span>
             <section className="k-colspan-all k-col-span-full">
-                <ToolbarScrollable scrollButtons="around" />
+                <ToolbarScrollable />
             </section>
 
             <span className="k-colspan-all k-col-span-full">Toolbar Buttons Start</span>

package/src/toolbar/toolbar.spec.tsx

@@ -5,8 +5,9 @@ import { Combobox } from '../combobox';
 import { DropdownList } from '../dropdownlist';
 import { MenuButton } from '../menu-button';
 import SplitButton from '../split-button/split-button.spec';
-import { classNames, optionClassNames, stateClassNames, States, Size, FillMode } from '../misc';
+import { classNames, optionClassNames, stateClassNames, States, Size, FillMode, ThemeColor, Roundness } from '../misc';
 import { ToolbarSeparator } from './toolbar-separator';
+import { Icon } from '../icon';
 
 export const TOOLBAR_CLASSNAME = `k-toolbar`;
 
@@ -28,7 +29,7 @@ export type KendoToolbarProps = KendoToolbarOptions & {
     resizable?: boolean;
     scrollable?: boolean;
     scrollButtons?: 'hidden' | 'start' | 'end' | 'around';
-    scrollingPosition?: 'start' | 'end';
+    scrollingPosition?: 'start' | 'end' | 'both';
     section?: boolean;
 };
 
@@ -37,6 +38,7 @@ export type KendoToolbarState = { [K in (typeof states)[number]]?: boolean };
 const defaultOptions = {
     size: Size.medium,
     fillMode: FillMode.solid,
+    scrollButtons: 'around'
 };
 
 export const Toolbar = (
@@ -189,23 +191,47 @@ export const Toolbar = (
                 {
                     [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
                     [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
-                    [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: (scrollable && (scrollButtons === 'hidden' || !scrollButtons)),
-                    [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: (scrollable && scrollButtons === 'hidden'),
+                    [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== 'both',
                     [`${TOOLBAR_CLASSNAME}-section`]: section,
                 }
             )}
         >
             {!scrollable && toolbarChildren}
 
-            {scrollable && (scrollButtons === 'hidden' || !scrollButtons) &&
+            {scrollable && scrollButtons === 'hidden' &&
                <span className='k-toolbar-items k-toolbar-items-scroll'>{toolbarChildren}</span>
             }
 
             {scrollable && scrollButtons === 'start' &&
                 <>
-                    <ButtonGroup>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
+                     <ButtonGroup>
+                        <span className={classNames(
+                            'k-toolbar-prev',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-left" />
+                        </span>
+                        <span className={classNames(
+                            'k-toolbar-next',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-right" />
+                        </span>
                     </ButtonGroup>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
                     <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
@@ -217,19 +243,67 @@ export const Toolbar = (
                     <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
                     <ButtonGroup>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
+                        <span className={classNames(
+                            'k-toolbar-prev',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-left" />
+                        </span>
+                        <span className={classNames(
+                            'k-toolbar-next',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-right" />
+                        </span>
                     </ButtonGroup>
                 </>
             }
 
-            {scrollable && scrollButtons === 'around' &&
+            {scrollable && (scrollButtons === 'around' || !scrollButtons) &&
                 <>
-                    <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
+                    <span className={classNames(
+                        'k-toolbar-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode,
+                            themeColor: ThemeColor.base,
+                            rounded: Roundness.medium
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon= "caret-alt-left" />
+                    </span>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
                     <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
-                    <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
+                    <span className={classNames(
+                        'k-toolbar-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode,
+                            themeColor: ThemeColor.base,
+                            rounded: Roundness.medium
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon= "caret-alt-right" />
+                    </span>
                 </>
             }