From 236562164891d9359530aa51b21659fa0e1d6604 Mon Sep 17 00:00:00 2001
From: Santiago Balladares <744091+santiagoballadares@users.noreply.github.com>
Date: Mon, 12 Feb 2024 22:22:08 +0100
Subject: [PATCH] feat(split-button): add split button

---
 .../pages/usage/components/button.vue         | 667 +++++++++++++-----
 packages/kotti-ui/source/constants.ts         |   2 +
 packages/kotti-ui/source/index.ts             |   3 +-
 .../source/kotti-button/KtSplitButton.vue     | 215 ++++++
 .../kotti-button/components/ActionsItem.vue   | 136 ++++
 .../kotti-button/hooks/use-actions-tippy.ts   |  81 +++
 .../kotti-ui/source/kotti-button/index.ts     |  21 +-
 .../kotti-ui/source/kotti-button/types.ts     |  83 ++-
 packages/kotti-ui/source/types/kotti.ts       |   1 +
 9 files changed, 1019 insertions(+), 190 deletions(-)
 create mode 100755 packages/kotti-ui/source/kotti-button/KtSplitButton.vue
 create mode 100644 packages/kotti-ui/source/kotti-button/components/ActionsItem.vue
 create mode 100644 packages/kotti-ui/source/kotti-button/hooks/use-actions-tippy.ts

diff --git a/packages/documentation/pages/usage/components/button.vue b/packages/documentation/pages/usage/components/button.vue
index 39687aec80..04a60bafb8 100644
--- a/packages/documentation/pages/usage/components/button.vue
+++ b/packages/documentation/pages/usage/components/button.vue
@@ -1,175 +1,462 @@
-<template lang="md">
-    <ComponentInfo v-bind="{ component }" />
-
-    Use buttons to lead a call to action or guide a user to their next steps.
-
-    ## Labels
-
-    The label text explains the purpose of the button, which should be clear, self-explanatory and short.
-
-    ![Button labels](~/assets/img/button_label.png)
-
-    `Yes/No` buttons are not self-explanatory, the user needs to read the
-    context to understand the action. Using `Cancel/Replace` buttons
-    let the user respond quickly without thinking.
-
-    ## Types
-
-    <div class="element-example white">
-    	<KtButton type="primary" class="mt-4 mr-4" @click="alert('primary')">Primary Button</KtButton>
-    	<KtButton type="secondary" class="mt-4 mr-4" @click="alert('secondary')">Secondary Button</KtButton>
-    	<KtButton type="danger" class="mt-4 mr-4" @click="alert('danger')">Danger Button</KtButton>
-    	<KtButton class="mt-4 mr-4" @click="alert('default')">Default Button</KtButton>
-    	<KtButton type="text" class="mt-4 mr-4" @click="alert('text')">Text Button</KtButton>
-    </div>
-
-    **Primary button**
-
-    Use the primary button to lead a main call to
-    action, such as changing the status of an order, or submitting a form. We suggest
-    only using one primary button on each page (not including the primary button
-    on a different layer). If there is another strong action needed, compare
-    their priority and choose the most important one.
-
-    **Secondary Button**
-
-    Use a secondary button only when there is a main call to action in the page.
-
-    **Danger Button**
-
-    The danger button should be used only for actions which can't be undone.
-    For example, canceling an order or deleting a material. Like the primary button, it should also limited to once per page.
-
-    **Default button**
-
-    This button can be used in most cases.
-
-    **Text button**
-
-    A text button can be used for sub-menus and page navigation. It also can pair with a primary button for destructive actions such as `Cancel`.
-
-    ## Label
-
-    <div class="element-example">
-    	<KtButton type="primary" icon="edit" label="Edit Button"/>
-    </div>
-
-    Instead of using the default slot, you can also provide text via the `label` property. Note that `v-text` and `v-t` are **NOT SUPPORTED**.
-
-    ```html
-    <KtButton type="primary" icon="edit" label="Edit Button"/>
-    ```
-
-    ## Icon
-
-    <div class="element-example">
-    	<KtButton type="primary" class="mr-4">Edit button</KtButton>
-    	<KtButton type="primary" icon="edit" label="Edit Button" class="mr-4" />
-    	<KtButton type="primary" icon="edit" label="Right Icon Button" iconPosition="right"/>
-    	<KtButton type="primary" icon="edit" helpText="This is an icon button"/>
-    </div>
-
-    * **Label only:** Used in most cases.
-    * **Icon and label:** Use when you need to catch the user's attention.
-    * **Icon only:** Use when you have limited space, such as when the page needs to fit on a mobile device, and a single icon is enough to convey the meaning,
-    * **iconPosition** prop can be used to place icon to the right of the label. Is left by default.
-    * **helpText** prop can be passed to **Icon only** buttons that is displayed on button hover.
-
-    ```html
-    <KtButton type="primary">Edit button</KtButton>
-    <KtButton type="primary" icon="edit" label="Edit Button" />
-    <KtButton type="primary" icon="edit" helpText="This is an icon button"/>
-    <KtButton type="primary" icon="edit" label="Right Icon Button" iconPosition="right"/>
-    ```
-
-    ## `toggleStatus`
-
-    *  For buttons that are **toggleable**, and can have two different status: "ON" or "OFF"
-    *  This prop is only valid for buttons of type **"default"** or type **"text"**.
-
-     <div class="element-example white">
-    	<KtButton type="default" :icon="toggleDefaultIcon" :toggleStatus="toggleDefaultStatus" @update:toggleStatus="(event) => onToggleDefaultClick(event)" class="mr-4">{{toggleDefaultLabel}}</KtButton>
-    	<KtButton type="text" :icon="toggleTextIcon" :toggleStatus="toggleTextStatus" @update:toggleStatus="(event) => onToggleTextClick(event)" :label="toggleTextLabel" class="mr-4" />
-    </div>
-    </div>
-
-    ## `isMultiline`/`isBlock`
-
-    For handling long text, we can use the `isMultiline` and `isBlock` properties.
-
-    ```html
-    <KtButton>Purchase</KtButton>
-    <KtButton isMultiline>Purchase this product without the 5 year garantee and proceed with the 2 year only garantee</KtButton>
-    ```
-
-    <div class="element-example">
-    	<div style="width: 200px;">
-    		<KtButton block type="primary">Purchase</KtButton><br>
-    		<KtButton icon="save" isBlock isMultiline>Purchase this product without the 5 year garantee</KtButton><br>
-    		<KtButton isBlock isMultiline>Purchase this product without the 5 year garantee and proceed with the 2 year only garantee</KtButton>
-    	</div>
-    	<br>
-    	<br>
-    		<KtButton isMultiline>Multiline works on one line if the parent does not constraint the width</KtButton><br>
-    		<KtButton isMultiline>(But the height is less reliable as it uses <code>line-height</code>)</KtButton>
-    </div>
-
-    ## Loading
-
-    <div class="element-example">
-    	<KtButton isLoading class="mr-16px" icon="edit">Loading button</KtButton>
-    	<KtButton type="primary" class="mr-16px" isLoading icon="edit" iconPosition="right">Loading button</KtButton>
-    	<KtButton type="secondary" class="mr-16px" isLoading>Loading</KtButton>
-    	<KtButton type="danger" class="mr-16px" isLoading>Loading</KtButton>
-    </div>
-
-    ```html
-    <KtButton isLoading>Loading button</KtButton>
-    <KtButton type="primary" isLoading>Loading button</KtButton>
-    <KtButton type="secondary" isLoading/>
-    <KtButton type="danger" isLoading/>
-    ```
-
-    ## Button Group
-
-    <div class="element-example">
-    	<KtButtonGroup>
-    		<KtButton type="primary" icon="edit">Edit</KtButton>
-    		<KtButton type="secondary" icon="trash">Delete</KtButton>
-    	</KtButtonGroup>
-    </div>
-
-    ```html
-    <KtButtonGroup>
-    	<KtButton type="primary" icon="edit">Edit</KtButton>
-    	<KtButton type="secondary" icon="trash">Delete</KtButton>
-    </KtButtonGroup>
-    ```
-
-    ## Size
-
-    <div class="element-example">
-    	<KtButton type="primary" size="small" icon="edit" class="mr-16px">Small</KtButton>
-    	<KtButton isLoading size="medium" class="mr-16px">Medium (Default)</KtButton>
-    	<KtButton size="large" icon="edit">Large</KtButton>
-    </div>
-
-    `KtButton` has 3 size: `small`, `medium` and `large`.
-
-    ```html
-    	<KtButton type="primary" size="small" icon="edit" class="mr-16px">Small</KtButton>
-    	<KtButton isLoading size="medium" class="mr-16px">Medium (Default)</KtButton>
-    	<KtButton size="large" icon="edit">Large</KtButton>
-    ```
-
-    ## `isSubmit`
-
-    If you want the button to trigger the native `form` `submit` event, you need to opt-in via `<KtButton isSubmit/>`
+<template>
+	<div>
+		<ComponentInfo v-bind="{ component: ktButtonComponent }" />
+
+		<p>
+			Use buttons to lead a call to action or guide a user to their next steps.
+		</p>
+
+		<h2>Labels</h2>
+
+		<p>
+			The label text explains the purpose of the button, which should be clear,
+			self-explanatory and short.
+		</p>
+
+		<img alt="Button labels" src="~/assets/img/button_label.png" />
+
+		<p>
+			<code>Yes/No</code> buttons are not self-explanatory, the user needs to
+			read the context to understand the action. Using
+			<code>Cancel/Replace</code> buttons let the user respond quickly without
+			thinking.
+		</p>
+
+		<h2>Types</h2>
+
+		<div class="element-example white">
+			<KtButton class="mt-4 mr-4" type="primary" @click="alert('primary')"
+				>Primary Button</KtButton
+			>
+			<KtButton class="mt-4 mr-4" type="secondary" @click="alert('secondary')"
+				>Secondary Button</KtButton
+			>
+			<KtButton class="mt-4 mr-4" type="danger" @click="alert('danger')"
+				>Danger Button</KtButton
+			>
+			<KtButton class="mt-4 mr-4" @click="alert('default')"
+				>Default Button</KtButton
+			>
+			<KtButton class="mt-4 mr-4" type="text" @click="alert('text')"
+				>Text Button</KtButton
+			>
+		</div>
+
+		<h4>Primary button</h4>
+
+		<p>
+			Use the primary button to lead a main call to action, such as changing the
+			status of an order, or submitting a form. We suggest only using one
+			primary button on each page (not including the primary button on a
+			different layer). If there is another strong action needed, compare their
+			priority and choose the most important one.
+		</p>
+
+		<h4>Secondary Button</h4>
+
+		<p>
+			Use a secondary button only when there is a main call to action in the
+			page.
+		</p>
+
+		<h4>Danger Button</h4>
+
+		<p>
+			The danger button should be used only for actions which can't be undone.
+			For example, canceling an order or deleting a material. Like the primary
+			button, it should also limited to once per page.
+		</p>
+
+		<h4>Default button</h4>
+
+		<p>This button can be used in most cases.</p>
+
+		<h4>Text button</h4>
+
+		<p>
+			A text button can be used for sub-menus and page navigation. It also can
+			pair with a primary button for destructive actions such as
+			<code>Cancel</code>.
+		</p>
+
+		<h2>Label</h2>
+
+		<div class="element-example">
+			<KtButton icon="edit" label="Edit Button" type="primary" />
+		</div>
+
+		<p>
+			Instead of using the default slot, you can also provide text via the
+			<code>label</code> property. Note that <code>v-text</code> and
+			<code>v-t</code> are <strong>NOT SUPPORTED</strong>.
+		</p>
+
+		<pre><code data-lang="html">
+&lt;KtButton type=&quot;primary&quot; icon=&quot;edit&quot; label=&quot;Edit Button&quot; /&gt;
+        </code></pre>
+
+		<h2>Icon</h2>
+
+		<div class="element-example">
+			<KtButton class="mr-4" type="primary">Edit button</KtButton>
+			<KtButton class="mr-4" icon="edit" label="Edit Button" type="primary" />
+			<KtButton
+				icon="edit"
+				iconPosition="right"
+				label="Right Icon Button"
+				type="primary"
+			/>
+			<KtButton helpText="This is an icon button" icon="edit" type="primary" />
+		</div>
+
+		<ul>
+			<li><strong>Label only:</strong> Used in most cases.</li>
+			<li>
+				<strong>Icon and label:</strong> Use when you need to catch the user's
+				attention.
+			</li>
+			<li>
+				<strong>Icon only:</strong> Use when you have limited space, such as
+				when the page needs to fit on a mobile device, and a single icon is
+				enough to convey the meaning,
+			</li>
+			<li>
+				<strong>iconPosition</strong> prop can be used to place icon to the
+				right of the label. Is left by default.
+			</li>
+			<li>
+				<strong>helpText</strong> prop can be passed to
+				<strong>Icon only</strong> buttons that is displayed on button hover.
+			</li>
+		</ul>
+
+		<pre><code data-lang="html">
+&lt;KtButton type=&quot;primary&quot;&gt;Edit button&lt;/KtButton&gt;
+&lt;KtButton type=&quot;primary&quot; icon=&quot;edit&quot; label=&quot;Edit Button&quot; /&gt;
+&lt;KtButton type=&quot;primary&quot; icon=&quot;edit&quot; helpText=&quot;This is an icon button&quot; /&gt;
+&lt;KtButton type=&quot;primary&quot; icon=&quot;edit&quot; label=&quot;Right Icon Button&quot; iconPosition=&quot;right&quot; /&gt;
+        </code></pre>
+
+		<h2><code>toggleStatus</code></h2>
+
+		<ul>
+			<li>
+				For buttons that are <strong>toggleable</strong>, and can have two
+				different status: "ON" or "OFF"
+			</li>
+			<li>
+				This prop is only valid for buttons of type
+				<strong>"default"</strong> or type <strong>"text"</strong>.
+			</li>
+		</ul>
+
+		<div class="element-example white">
+			<KtButton
+				class="mr-4"
+				:icon="toggleDefaultIcon"
+				:toggleStatus="toggleDefaultStatus"
+				type="default"
+				@update:toggleStatus="(event) => onToggleDefaultClick(event)"
+				>{{ toggleDefaultLabel }}</KtButton
+			>
+			<KtButton
+				class="mr-4"
+				:icon="toggleTextIcon"
+				:label="toggleTextLabel"
+				:toggleStatus="toggleTextStatus"
+				type="text"
+				@update:toggleStatus="(event) => onToggleTextClick(event)"
+			/>
+		</div>
+
+		<h2><code>isMultiline</code>/<code>isBlock</code></h2>
+
+		<p>
+			For handling long text, we can use the <code>isMultiline</code> and
+			<code>isBlock</code> properties.
+		</p>
+
+		<pre><code data-lang="html">
+&lt;KtButton&gt;Purchase&lt;/KtButton&gt;
+&lt;KtButton isMultiline&gt;Purchase this product without the 5 year garantee and proceed with the 2 year only garantee&lt;/KtButton&gt;
+        </code></pre>
+
+		<div class="element-example">
+			<div style="width: 200px">
+				<KtButton block type="primary">Purchase</KtButton><br />
+				<KtButton icon="save" isBlock isMultiline
+					>Purchase this product without the 5 year garantee</KtButton
+				><br />
+				<KtButton isBlock isMultiline
+					>Purchase this product without the 5 year garantee and proceed with
+					the 2 year only garantee</KtButton
+				>
+			</div>
+			<br />
+			<br />
+			<KtButton isMultiline
+				>Multiline works on one line if the parent does not constraint the
+				width</KtButton
+			><br />
+			<KtButton isMultiline
+				>(But the height is less reliable as it uses
+				<code>line-height</code>)</KtButton
+			>
+		</div>
+
+		<h2>Loading</h2>
+
+		<div class="element-example">
+			<KtButton class="mr-16px" icon="edit" isLoading>Loading button</KtButton>
+			<KtButton
+				class="mr-16px"
+				icon="edit"
+				iconPosition="right"
+				isLoading
+				type="primary"
+				>Loading button</KtButton
+			>
+			<KtButton class="mr-16px" isLoading type="secondary">Loading</KtButton>
+			<KtButton class="mr-16px" isLoading type="danger">Loading</KtButton>
+		</div>
+
+		<pre><code data-lang="html">
+&lt;KtButton isLoading&gt;Loading button&lt;/KtButton&gt;
+&lt;KtButton type=&quot;primary&quot; isLoading&gt;Loading button&lt;/KtButton&gt;
+&lt;KtButton type=&quot;secondary&quot; isLoading /&gt;
+&lt;KtButton type=&quot;danger&quot; isLoading /&gt;
+        </code></pre>
+
+		<h2>Button Group</h2>
+
+		<div class="element-example">
+			<KtButtonGroup>
+				<KtButton icon="edit" type="primary">Edit</KtButton>
+				<KtButton icon="trash" type="secondary">Delete</KtButton>
+			</KtButtonGroup>
+		</div>
+
+		<pre><code data-lang="html">
+&lt;KtButtonGroup&gt;
+    &lt;KtButton type=&quot;primary&quot; icon=&quot;edit&quot;&gt;Edit&lt;/KtButton&gt;
+    &lt;KtButton type=&quot;secondary&quot; icon=&quot;trash&quot;&gt;Delete&lt;/KtButton&gt;
+&lt;/KtButtonGroup&gt;
+        </code></pre>
+
+		<h2>Size</h2>
+
+		<div class="element-example">
+			<KtButton class="mr-16px" icon="edit" size="small" type="primary"
+				>Small</KtButton
+			>
+			<KtButton class="mr-16px" isLoading size="medium"
+				>Medium (Default)</KtButton
+			>
+			<KtButton icon="edit" size="large">Large</KtButton>
+		</div>
+
+		<p>
+			<code>KtButton</code> has 3 size: <code>small</code>,
+			<code>medium</code> and <code>large</code>.
+		</p>
+
+		<pre><code data-lang="html">
+&lt;KtButton type=&quot;primary&quot; size=&quot;small&quot; icon=&quot;edit&quot;&gt;Small&lt;/KtButton&gt;
+&lt;KtButton isLoading size=&quot;medium&quot;&gt;Medium (Default)&lt;/KtButton&gt;
+&lt;KtButton size=&quot;large&quot; icon=&quot;edit&quot;&gt;&gt;Large&lt;/KtButton&gt;
+        </code></pre>
+
+		<h2><code>isSubmit</code></h2>
+
+		<p>
+			If you want the button to trigger the native <code>form</code>
+			<code>submit</code> event, you need to opt-in via
+			<code>&lt;KtButton isSubmit /&gt;</code>
+		</p>
+
+		<br />
+
+		<ComponentInfo v-bind="{ component: ktSplitButtonComponent }" />
+
+		<p>
+			A split button lets someone take one of several related actions. The
+			dominant action is the left button, while additional actions are tucked
+			away in a popover menu that is triggered by clicking on the dropdown
+			button.
+		</p>
+
+		<div class="element-example">
+			<KtSplitButton
+				v-bind="splitButtonProps"
+				:actions="[
+					{
+						icon: 'calendar',
+						label: 'Action 1',
+						onClick: () => alert('Action 1'),
+						dataTest: 'action-1',
+					},
+					{
+						icon: 'landline',
+						label: 'Action 2',
+						onClick: () => alert('Action 2'),
+						dataTest: 'action-2',
+					},
+					{
+						icon: 'location',
+						label: 'Action 3',
+						onClick: () => alert('Action 3'),
+						dataTest: 'action-3',
+						isDisabled: true,
+					},
+				]"
+				class="mr-4"
+				@click="alert(splitButtonProps.label)"
+			/>
+			<KtSplitButton
+				v-bind="splitButtonProps"
+				:actions="[
+					{
+						label: 'Action 4',
+						onClick: () => alert('Action 4'),
+						dataTest: 'action-4',
+					},
+					{
+						label: 'Action 5',
+						onClick: () => alert('Action 5'),
+						dataTest: 'action-5',
+						isDisabled: true,
+					},
+					{
+						label: 'Action 6',
+						onClick: () => alert('Action 6'),
+						dataTest: 'action-6',
+					},
+				]"
+				@click="alert(splitButtonProps.label)"
+			/>
+		</div>
+
+		<KtForm v-model="settings" size="small">
+			<div class="wrapper">
+				<div>
+					<h4>Settings</h4>
+					<KtFieldSingleSelect
+						formKey="type"
+						hideClear
+						isUnsorted
+						label="type"
+						:options="[
+							{ label: 'default (default)', value: 'default' },
+							{ label: 'primary', value: 'primary' },
+						]"
+					/>
+					<KtFieldSingleSelect
+						formKey="size"
+						hideClear
+						isUnsorted
+						label="size"
+						:options="[
+							{ label: 'small', value: 'small' },
+							{ label: 'medium (default)', value: 'medium' },
+							{ label: 'large', value: 'large' },
+						]"
+					/>
+					<KtFieldToggleGroup
+						formKey="booleanFlags"
+						isOptional
+						label="Boolean Flags"
+						:options="[
+							{ key: 'isDisabled', label: 'isDisabled' },
+							{ key: 'isLoading', label: 'isLoading' },
+						]"
+						type="switch"
+					/>
+				</div>
+				<div>
+					<h4>Texts</h4>
+					<KtFieldText formKey="label" label="label" />
+					<KtFieldText formKey="dataTest" isOptional label="dataTest" />
+					<h4>Decoration</h4>
+					<div class="field-row">
+						<KtFieldSingleSelect
+							formKey="icon"
+							isOptional
+							label="icon"
+							:options="iconOptions"
+						>
+							<template #option="{ option }">
+								<i
+									class="yoco"
+									style="margin-right: 10px; font-size: 24px"
+									v-text="option.value"
+								/>
+								<span v-text="option.label" />
+							</template>
+						</KtFieldSingleSelect>
+						<KtFieldSingleSelect
+							formKey="iconPosition"
+							isOptional
+							isUnsorted
+							label="iconPosition"
+							:options="[
+								{ label: 'left (default)', value: 'left' },
+								{ label: 'right', value: 'right' },
+							]"
+						/>
+					</div>
+				</div>
+			</div>
+		</KtForm>
+
+		<pre><code data-lang="html">
+&lt;KtSplitButton
+    :actions=&quot;[
+        { icon: 'calendar', label: 'Action 1', onClick: () => alert('Action 1'), dataTest: 'calendar' },
+        { icon: 'landline', label: 'Action 2', onClick: () => alert('Action 2'), dataTest: 'landline' },
+        { icon: 'location', label: 'Action 3', onClick: () => alert('Action 3'), dataTest: 'location', isDisabled: true },
+    ]&quot;
+    dataTest=&quot;btn-1&quot;
+    icon=&quot;download&quot;
+    label=&quot;Split Button&quot;
+    type=&quot;primary&quot;
+    @click=&quot;alert('Split Button')&quot;
+/&gt;
+        </code></pre>
+
+		<h3>Best practices</h3>
+
+		<ul>
+			<li>
+				When there isn't a clear default action, present all options equally by
+				using a dropdown menu or button group.
+			</li>
+			<li>
+				Try to keep the number of secondary actions to a minimum to aid focus
+				and comprehension.
+			</li>
+			<li>
+				Remember that some users may miss the secondary action entirely, so
+				ensure users aren't required to interact with the secondary action to
+				proceed. In other words, make sure the main action button allows people
+				to proceed in most cases.
+			</li>
+			<li>Do not repeat the default action in the secondary actions menu.</li>
+			<li>
+				Avoid grouping actions that are dissimilar in the secondary actions
+				menu.
+			</li>
+			<li>
+				To represent a ”more actions” button, use a simple dropdown menu button
+				with the "...” icon.
+			</li>
+		</ul>
+	</div>
 </template>
 
 <script lang="ts">
-import { KtButton } from '@3yourmind/kotti-ui'
+import { KtButton, KtSplitButton } from '@3yourmind/kotti-ui'
 import { Kotti } from '@3yourmind/kotti-ui'
+import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, ref } from 'vue'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
@@ -187,15 +474,55 @@ export default defineComponent({
 			Kotti.Button.ToggleStatus.OFF,
 		)
 
+		const settings = ref<{
+			booleanFlags: {
+				isDisabled: Kotti.FieldToggle.Value
+				isLoading: Kotti.FieldToggle.Value
+			}
+			dataTest: Kotti.FieldText.Value
+			icon: Kotti.FieldSingleSelect.Value
+			iconPosition: Kotti.FieldSingleSelect.Value
+			label: Kotti.FieldText.Value
+			size: Kotti.FieldSingleSelect.Value
+			type: Kotti.FieldSingleSelect.Value
+		}>({
+			booleanFlags: {
+				isDisabled: null,
+				isLoading: null,
+			},
+			dataTest: null,
+			icon: null,
+			iconPosition: null,
+			label: 'Split Button',
+			size: Kotti.SplitButton.Size.MEDIUM,
+			type: Kotti.SplitButton.Type.DEFAULT,
+		})
+
 		return {
 			alert: (value: string) => window.alert(value),
-			component: KtButton,
+			iconOptions: Object.values(Yoco.Icon).map((icon) => ({
+				label: icon,
+				value: icon,
+			})),
+			ktButtonComponent: KtButton,
+			ktSplitButtonComponent: KtSplitButton,
 			onToggleDefaultClick: (status: Kotti.Button.ToggleStatus) => {
 				toggleDefaultStatus.value = status
 			},
 			onToggleTextClick: (status: Kotti.Button.ToggleStatus) => {
 				toggleTextStatus.value = status
 			},
+			settings,
+			splitButtonProps: computed(() =>
+				Object.fromEntries(
+					[
+						...Object.entries(settings.value).filter(
+							([prop]) => prop !== 'booleanFlags',
+						),
+						...Object.entries(settings.value.booleanFlags),
+					].filter(([_, value]) => value !== null),
+				),
+			),
 			toggleDefaultIcon: computed(() =>
 				toggleDefaultStatus.value === Kotti.Button.ToggleStatus.ON
 					? 'check'
@@ -222,3 +549,5 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style src="../../../styles/form-fields.scss" lang="scss" scoped />
diff --git a/packages/kotti-ui/source/constants.ts b/packages/kotti-ui/source/constants.ts
index 971d01e6ff..7e17a06a49 100644
--- a/packages/kotti-ui/source/constants.ts
+++ b/packages/kotti-ui/source/constants.ts
@@ -5,3 +5,5 @@ export const ISO8601_SECONDS = 'YYYY-MM-DD HH:mm:ss' as const
 export const ONE_HUNDRED_PERCENT = 100 as const
 
 export const TIPPY_LIGHT_BORDER_ARROW_HEIGHT = 7
+
+export const TIPPY_VERTICAL_OFFSET = 4
diff --git a/packages/kotti-ui/source/index.ts b/packages/kotti-ui/source/index.ts
index 31f5298877..cbc2f963dd 100644
--- a/packages/kotti-ui/source/index.ts
+++ b/packages/kotti-ui/source/index.ts
@@ -14,7 +14,7 @@ import { KtBanner } from './kotti-banner'
 export * from './kotti-banner'
 import { KtBreadcrumb } from './kotti-breadcrumb'
 export * from './kotti-breadcrumb'
-import { KtButton } from './kotti-button'
+import { KtButton, KtSplitButton } from './kotti-button'
 export * from './kotti-button'
 import { KtButtonGroup } from './kotti-button-group'
 export * from './kotti-button-group'
@@ -157,6 +157,7 @@ export default {
 			KtPagination,
 			KtPopover,
 			KtRow,
+			KtSplitButton,
 			KtTable,
 			KtTableColumn,
 			KtTableConsumer,
diff --git a/packages/kotti-ui/source/kotti-button/KtSplitButton.vue b/packages/kotti-ui/source/kotti-button/KtSplitButton.vue
new file mode 100755
index 0000000000..3173f0cb58
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-button/KtSplitButton.vue
@@ -0,0 +1,215 @@
+<template>
+	<div class="kt-split-button">
+		<KtButton
+			class="kt-split-button__primary-action"
+			v-bind="primaryActionButtonProps"
+			@click="onClickPrimaryAction"
+		/>
+		<div ref="tippyTriggerRef">
+			<KtButton
+				:class="secondaryActionsButtonClasses"
+				v-bind="secondaryActionsButtonProps"
+				@click.stop="onClickSecondaryActions"
+			/>
+		</div>
+		<div ref="tippyContentRef">
+			<ActionsItem
+				v-for="(action, index) in actions"
+				:key="index"
+				v-bind="{
+					...action,
+					hasFocus: isActionInFocus(index),
+					index,
+					rootDataTest: dataTest,
+				}"
+				@click="onClickAction"
+				@updateIndexInFocus="onUpdateIndexInFocus"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Yoco } from '@3yourmind/yoco'
+import omit from 'lodash/omit'
+import {
+	computed,
+	defineComponent,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+} from 'vue'
+
+import { makeProps } from '../make-props'
+
+import ActionsItem from './components/ActionsItem.vue'
+import { useActionsTippy } from './hooks/use-actions-tippy'
+import { KottiSplitButton } from './types'
+
+/**
+ * Do not change. UNSET_INDEX is expected to be -1.
+ */
+const UNSET_INDEX = -1
+
+export default defineComponent({
+	name: 'KtSplitButton',
+	components: {
+		ActionsItem,
+	},
+	props: makeProps(KottiSplitButton.propsSchema),
+	setup(props, { emit }) {
+		const { isTippyOpen, setIsTippyOpen, tippyContentRef, tippyTriggerRef } =
+			useActionsTippy({
+				isDisabled: computed(() => props.isDisabled),
+				isLoading: computed(() => props.isLoading),
+			})
+
+		const currentActionIndexInFocus = ref<number>(UNSET_INDEX)
+
+		const hasAvailableActions = computed(() =>
+			props.actions.some((action) => !action.isDisabled),
+		)
+
+		const getNextAvailableActionIndex = (
+			currentIndex: number,
+			direction: 'down' | 'up',
+		) => {
+			if (
+				(currentIndex === 0 && direction === 'up') ||
+				(currentIndex === props.actions.length - 1 && direction === 'down')
+			)
+				return currentIndex
+
+			const step = direction === 'down' ? 1 : -1
+
+			for (
+				let nextIndex = currentIndex + step;
+				nextIndex < props.actions.length && nextIndex >= 0;
+				nextIndex += step
+			) {
+				const action = props.actions[nextIndex]
+
+				if (!action)
+					throw new Error(
+						`KtSplitButton: action item not found for index: ${nextIndex}`,
+					)
+
+				if (!action.isDisabled) return nextIndex
+			}
+
+			return currentIndex
+		}
+
+		const keydownListener = (event: KeyboardEvent) => {
+			if (!hasAvailableActions.value) return
+
+			switch (event.key) {
+				case 'ArrowDown': {
+					currentActionIndexInFocus.value = getNextAvailableActionIndex(
+						currentActionIndexInFocus.value,
+						'down',
+					)
+					break
+				}
+
+				case 'ArrowUp': {
+					currentActionIndexInFocus.value = getNextAvailableActionIndex(
+						currentActionIndexInFocus.value,
+						'up',
+					)
+					break
+				}
+			}
+		}
+
+		onMounted(() => {
+			tippyContentRef.value?.addEventListener('keydown', keydownListener, {
+				capture: true,
+			})
+		})
+
+		onBeforeUnmount(() => {
+			tippyContentRef.value?.removeEventListener('keydown', keydownListener)
+		})
+
+		watch(
+			() => isTippyOpen.value,
+			(isOpen) => {
+				if (!isOpen) currentActionIndexInFocus.value = UNSET_INDEX
+				else if (hasAvailableActions.value)
+					// Focus the 1st available action item
+					currentActionIndexInFocus.value = getNextAvailableActionIndex(
+						UNSET_INDEX,
+						'down',
+					)
+			},
+		)
+
+		return {
+			currentActionIndexInFocus,
+			isActionInFocus: (actionIndex: number) =>
+				actionIndex === currentActionIndexInFocus.value,
+			onClickAction: () => setIsTippyOpen(false),
+			onClickPrimaryAction: () => {
+				if (props.isDisabled || props.isLoading) return
+				emit('click')
+			},
+			onClickSecondaryActions: () => setIsTippyOpen(!isTippyOpen.value),
+			onUpdateIndexInFocus: (index: number) => {
+				if (isTippyOpen.value) currentActionIndexInFocus.value = index
+			},
+			primaryActionButtonProps: computed(() => ({
+				...omit(props, ['actions', 'dataTest', 'isDisabled']),
+				'data-test': [props.dataTest, 'primary-action']
+					.filter(Boolean)
+					.join('.'),
+				disabled: props.isDisabled,
+			})),
+			secondaryActionsButtonClasses: computed(() => ({
+				'kt-split-button__secondary-actions': true,
+				'kt-split-button__secondary-actions--is-active': isTippyOpen.value,
+			})),
+			secondaryActionsButtonProps: computed(() => ({
+				'data-test': [props.dataTest, 'secondary-actions']
+					.filter(Boolean)
+					.join('.'),
+				disabled: props.isDisabled,
+				icon: Yoco.Icon.CHEVRON_DOWN,
+				size: props.size,
+				type: props.type,
+			})),
+			tippyContentRef,
+			tippyTriggerRef,
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.kt-split-button {
+	display: -webkit-inline-box;
+
+	&__primary-action {
+		border-radius: var(--border-radius) 0 0 var(--border-radius);
+	}
+
+	&__secondary-actions {
+		width: var(--unit-6);
+		border-left: 0;
+		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+
+		&--is-active {
+			&.kt-button--type-default:not(:hover) {
+				background-color: var(--primary-20);
+				border-color: var(--primary-20);
+			}
+
+			&.kt-button--type-primary:not(:hover) {
+				background-color: var(--primary-80);
+				border-color: var(--primary-80);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-button/components/ActionsItem.vue b/packages/kotti-ui/source/kotti-button/components/ActionsItem.vue
new file mode 100644
index 0000000000..de2580042c
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-button/components/ActionsItem.vue
@@ -0,0 +1,136 @@
+<template>
+	<button
+		ref="itemRef"
+		v-bind="itemProps"
+		@click.stop="onItemClick"
+		@keydown.down.prevent
+		@keydown.up.prevent
+	>
+		<i v-if="icon" class="yoco" v-text="icon" />
+		<span v-text="label" />
+	</button>
+</template>
+
+<script lang="ts">
+import {
+	computed,
+	defineComponent,
+	onMounted,
+	onBeforeUnmount,
+	ref,
+	watch,
+} from 'vue'
+import { z } from 'zod'
+
+import { makeProps } from '../../make-props'
+import { isInFocus } from '../../utilities'
+import { KottiSplitButton } from '../types'
+
+const propsSchema = KottiSplitButton.actionSchema.extend({
+	hasFocus: z.boolean().default(false),
+	index: z.number(),
+	rootDataTest: z.string().nullable().default(null),
+})
+
+export default defineComponent({
+	name: 'SplitButtonActionsItem',
+	props: makeProps(propsSchema),
+	setup(props, { emit }) {
+		const itemRef = ref<HTMLButtonElement | null>(null)
+
+		const focusListener = () => {
+			if (isInFocus(itemRef.value) && !props.hasFocus)
+				emit('updateIndexInFocus', props.index)
+		}
+
+		onMounted(() =>
+			itemRef.value?.addEventListener('focus', focusListener, {
+				capture: true,
+			}),
+		)
+
+		onBeforeUnmount(() =>
+			itemRef.value?.removeEventListener('focus', focusListener),
+		)
+
+		watch(
+			() => props.hasFocus,
+			(hasFocus, hadFocus) => {
+				if (hasFocus && !hadFocus) itemRef.value?.focus({ preventScroll: true })
+			},
+		)
+
+		return {
+			itemProps: computed(() => ({
+				class: {
+					'kt-split-button-actions-item': true,
+					'kt-split-button-actions-item--is-disabled': props.isDisabled,
+				},
+				'data-test': [
+					props.rootDataTest,
+					`action-${props.index}`,
+					props.dataTest,
+				]
+					.filter(Boolean)
+					.join('.'),
+				disabled: props.isDisabled,
+			})),
+			itemRef,
+			onItemClick: () => {
+				if (props.isDisabled) return
+				emit('click')
+				props.onClick()
+			},
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+// Remove default styles from <button /> elements
+@mixin remove-button-styles {
+	padding: 0;
+	margin: 0;
+	font: inherit;
+	text-align: inherit;
+	appearance: none;
+	background-color: transparent;
+	border: none;
+	border-radius: 0;
+}
+
+.kt-split-button-actions-item {
+	@include remove-button-styles;
+
+	display: flex;
+	gap: var(--unit-2);
+	align-items: center;
+	width: 100%;
+	padding: var(--unit-2) var(--unit-4);
+	color: var(--text-01);
+	cursor: pointer;
+
+	&--is-disabled {
+		cursor: not-allowed;
+		opacity: 0.46;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus,
+	&:hover:not(.kt-split-button-actions-item--is-disabled) {
+		background-color: var(--ui-01);
+	}
+
+	.yoco {
+		font-size: 1rem;
+	}
+
+	span {
+		font-size: 16px;
+		line-height: 20px;
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-button/hooks/use-actions-tippy.ts b/packages/kotti-ui/source/kotti-button/hooks/use-actions-tippy.ts
new file mode 100644
index 0000000000..173dd39813
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-button/hooks/use-actions-tippy.ts
@@ -0,0 +1,81 @@
+import { useTippy } from '@3yourmind/vue-use-tippy'
+import { Instance } from 'tippy.js'
+import { Ref, computed, ref, watch } from 'vue'
+
+import { TIPPY_VERTICAL_OFFSET } from '../../constants'
+
+export const useActionsTippy = ({
+	isDisabled,
+	isLoading,
+}: {
+	isDisabled: Ref<boolean>
+	isLoading: Ref<boolean>
+}) => {
+	const isTippyOpen = ref(false)
+	const tippyContentRef = ref<HTMLDivElement | null>(null)
+	const tippyInstanceRef = ref<Instance | null>(null)
+	const tippyTriggerRef = ref<HTMLDivElement | null>(null)
+
+	useTippy(
+		tippyTriggerRef,
+		computed(() => ({
+			appendTo: () => document.body,
+			arrow: false,
+			content: tippyContentRef.value ?? undefined,
+			hideOnClick: false,
+			interactive: true,
+			offset: [0, TIPPY_VERTICAL_OFFSET],
+			onClickOutside: () => {
+				setIsTippyOpen(false)
+			},
+			onCreate(instance: Instance) {
+				tippyInstanceRef.value = instance
+			},
+			onHide: () => {
+				isTippyOpen.value = false
+			},
+			onShow: () => {
+				if (isDisabled.value || isLoading.value) return false
+				isTippyOpen.value = true
+			},
+			placement: 'bottom-end',
+			theme: 'light-border',
+			trigger: 'manual',
+		})),
+	)
+
+	const setIsTippyOpen = (isOpen: boolean) => {
+		if (!tippyInstanceRef.value) return
+
+		if (isOpen) tippyInstanceRef.value.show()
+		else tippyInstanceRef.value.hide()
+	}
+
+	watch(isTippyOpen, (isOpen) => {
+		if (!tippyInstanceRef.value || !isOpen) return
+
+		const tippyEl = document.getElementById(
+			`tippy-${tippyInstanceRef.value.id}`,
+		)
+
+		if (tippyEl) {
+			const containerEl = tippyEl.getElementsByClassName('tippy-content')[0]
+			containerEl?.setAttribute('style', 'padding: 8px')
+		}
+	})
+
+	watch(
+		[isDisabled, isLoading],
+		() => {
+			if (isDisabled || isLoading) setIsTippyOpen(false)
+		},
+		{ immediate: true },
+	)
+
+	return {
+		isTippyOpen,
+		setIsTippyOpen,
+		tippyContentRef,
+		tippyTriggerRef,
+	}
+}
diff --git a/packages/kotti-ui/source/kotti-button/index.ts b/packages/kotti-ui/source/kotti-button/index.ts
index 286806eb72..b5e910c5d7 100755
--- a/packages/kotti-ui/source/kotti-button/index.ts
+++ b/packages/kotti-ui/source/kotti-button/index.ts
@@ -2,10 +2,14 @@ import { MetaDesignType } from '../types/kotti'
 import { attachMeta, makeInstallable } from '../utilities'
 
 import KtButtonVue from './KtButton.vue'
-import { KottiButton } from './types'
+import KtSplitButtonVue from './KtSplitButton.vue'
+import { KottiButton, KottiSplitButton } from './types'
+
+const componentFolder = 'kotti-button'
 
 export const KtButton = attachMeta(makeInstallable(KtButtonVue), {
 	addedVersion: '0.0.1',
+	componentFolder,
 	deprecated: null,
 	designs: {
 		type: MetaDesignType.FIGMA,
@@ -22,3 +26,18 @@ export const KtButton = attachMeta(makeInstallable(KtButtonVue), {
 		schema: KottiButton.propsSchema,
 	},
 })
+
+export const KtSplitButton = attachMeta(makeInstallable(KtSplitButtonVue), {
+	addedVersion: '5.7.0',
+	componentFolder,
+	deprecated: null,
+	designs: {
+		type: MetaDesignType.FIGMA,
+		url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?type=design&node-id=5586-8691&mode=design&t=x2i9HCwj1BucUZrh-0',
+	},
+	slots: {},
+	typeScript: {
+		namespace: 'Kotti.SplitButton',
+		schema: KottiSplitButton.propsSchema,
+	},
+})
diff --git a/packages/kotti-ui/source/kotti-button/types.ts b/packages/kotti-ui/source/kotti-button/types.ts
index e1898a01ce..420a68f1ec 100644
--- a/packages/kotti-ui/source/kotti-button/types.ts
+++ b/packages/kotti-ui/source/kotti-button/types.ts
@@ -3,15 +3,12 @@ import { z } from 'zod'
 
 import { createLooseZodEnumSchema } from '../zod-utilities/enums'
 
-export module KottiButton {
-	export enum Type {
-		DANGER = 'danger',
-		DEFAULT = 'default',
-		PRIMARY = 'primary',
-		SECONDARY = 'secondary',
-		TEXT = 'text',
+export module Shared {
+	export enum IconPosition {
+		LEFT = 'left',
+		RIGHT = 'right',
 	}
-	export const typeSchema = createLooseZodEnumSchema(Type)
+	export const iconPositionSchema = createLooseZodEnumSchema(IconPosition)
 
 	export enum Size {
 		LARGE = 'large',
@@ -20,11 +17,23 @@ export module KottiButton {
 	}
 	export const sizeSchema = createLooseZodEnumSchema(Size)
 
-	export enum IconPosition {
-		LEFT = 'left',
-		RIGHT = 'right',
-	}
-	export const iconPosition = createLooseZodEnumSchema(IconPosition)
+	export const propsSchema = z.object({
+		icon: yocoIconSchema.nullable().default(null),
+		iconPosition: iconPositionSchema.default(IconPosition.LEFT),
+		isLoading: z.boolean().default(false),
+		isSubmit: z.boolean().default(false),
+		size: sizeSchema.default(Size.MEDIUM),
+	})
+	export type Props = z.input<typeof propsSchema>
+	export type PropsInternal = z.output<typeof propsSchema>
+}
+
+export module KottiButton {
+	export import IconPosition = Shared.IconPosition
+	export import iconPositionSchema = Shared.iconPositionSchema
+
+	export import Size = Shared.Size
+	export import sizeSchema = Shared.sizeSchema
 
 	export enum ToggleStatus {
 		ON = 'on',
@@ -32,20 +41,56 @@ export module KottiButton {
 	}
 	export const toggleStatusSchema = createLooseZodEnumSchema(ToggleStatus)
 
-	export const propsSchema = z.object({
+	export enum Type {
+		DANGER = 'danger',
+		DEFAULT = 'default',
+		PRIMARY = 'primary',
+		SECONDARY = 'secondary',
+		TEXT = 'text',
+	}
+	export const typeSchema = createLooseZodEnumSchema(Type)
+
+	export const propsSchema = Shared.propsSchema.extend({
 		helpText: z.string().nullable().default(null),
-		icon: yocoIconSchema.nullable().default(null),
-		iconPosition: iconPosition.default(IconPosition.LEFT),
 		isBlock: z.boolean().default(false),
-		isLoading: z.boolean().default(false),
 		isMultiline: z.boolean().default(false),
-		isSubmit: z.boolean().default(false),
 		label: z.string().nullable().default(null),
-		size: sizeSchema.default(Size.MEDIUM),
 		toggleStatus: toggleStatusSchema.nullable().default(null),
 		type: typeSchema.default(Type.DEFAULT),
 	})
+	export type Props = z.input<typeof propsSchema>
+	export type PropsInternal = z.output<typeof propsSchema>
+}
+
+export module KottiSplitButton {
+	export import IconPosition = Shared.IconPosition
+	export import iconPositionSchema = Shared.iconPositionSchema
+
+	export import Size = Shared.Size
+	export import sizeSchema = Shared.sizeSchema
+
+	export enum Type {
+		DEFAULT = 'default',
+		PRIMARY = 'primary',
+	}
+	export const typeSchema = createLooseZodEnumSchema(Type)
+
+	export const actionSchema = z.object({
+		dataTest: z.string().optional(),
+		icon: yocoIconSchema.nullable().default(null),
+		isDisabled: z.boolean().default(false),
+		label: z.string(),
+		onClick: z.function(z.tuple([]), z.void()),
+	})
+	export type Action = z.output<typeof actionSchema>
 
+	export const propsSchema = Shared.propsSchema.extend({
+		actions: z.array(actionSchema).default(() => []),
+		dataTest: z.string().optional(),
+		isDisabled: z.boolean().default(false),
+		label: z.string(),
+		type: typeSchema.default(Type.DEFAULT),
+	})
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
 }
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index 2419066867..93d7aeb14f 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -14,6 +14,7 @@ export { KottiAvatarGroup as AvatarGroup } from '../kotti-avatar-group/types'
 export { KottiBanner as Banner } from '../kotti-banner/types'
 export { KottiBreadcrumb as Breadcrumb } from '../kotti-breadcrumb/types'
 export { KottiButton as Button } from '../kotti-button/types'
+export { KottiSplitButton as SplitButton } from '../kotti-button/types'
 export type { KottiButtonGroup as ButtonGroup } from '../kotti-button-group/types'
 export { KottiCard as Card } from '../kotti-card/types'
 export type { KottiCol as Col } from '../kotti-col/types'