diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss
index 2f5b1055..e7fec17e 100644
--- a/packages/histoire-app/src/app/style/main.pcss
+++ b/packages/histoire-app/src/app/style/main.pcss
@@ -24,7 +24,7 @@ a {
text-decoration: inherit;
}
-input {
+input, button {
font-family: inherit;
}
diff --git a/packages/histoire-controls/src/components/HstWrapper.vue b/packages/histoire-controls/src/components/HstWrapper.vue
index 27684b50..6d5b6fa7 100644
--- a/packages/histoire-controls/src/components/HstWrapper.vue
+++ b/packages/histoire-controls/src/components/HstWrapper.vue
@@ -5,15 +5,23 @@ export default {
-
+
diff --git a/packages/histoire-controls/src/components/button/HstButton.story.vue b/packages/histoire-controls/src/components/button/HstButton.story.vue
new file mode 100644
index 00000000..b68e1964
--- /dev/null
+++ b/packages/histoire-controls/src/components/button/HstButton.story.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Click me!
+
+
+
+
diff --git a/packages/histoire-controls/src/components/button/HstButton.vue b/packages/histoire-controls/src/components/button/HstButton.vue
new file mode 100644
index 00000000..fb140058
--- /dev/null
+++ b/packages/histoire-controls/src/components/button/HstButton.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue
new file mode 100644
index 00000000..26d4821f
--- /dev/null
+++ b/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.vue
new file mode 100644
index 00000000..9692a19b
--- /dev/null
+++ b/packages/histoire-controls/src/components/button/HstButtonGroup.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
diff --git a/packages/histoire-controls/src/components/number/HstNumber.vue b/packages/histoire-controls/src/components/number/HstNumber.vue
index d649d412..c8cab180 100644
--- a/packages/histoire-controls/src/components/number/HstNumber.vue
+++ b/packages/histoire-controls/src/components/number/HstNumber.vue
@@ -1,7 +1,6 @@
@@ -86,7 +85,7 @@ onUnmounted(() => {
:class="{
'htw-select-none': isDragging,
}"
- class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
+ class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize htw-box-border"
>
diff --git a/packages/histoire-controls/src/components/slider/HstSlider.story.vue b/packages/histoire-controls/src/components/slider/HstSlider.story.vue
index 65ff3285..1245dd6e 100644
--- a/packages/histoire-controls/src/components/slider/HstSlider.story.vue
+++ b/packages/histoire-controls/src/components/slider/HstSlider.story.vue
@@ -14,6 +14,7 @@ const state = reactive({
Variant: typeof SvelteComponentTyped
// Controls
+ Button: typeof SvelteComponentTyped
+ ButtonGroup: typeof SvelteComponentTyped<{
+ value: string
+ options: HstControlOption[]
+ title?: string
+ }>
Checkbox: typeof SvelteComponentTyped<{
value: boolean
title: string