diff --git a/contents/_includes/patterns/spin-button.njk b/contents/_includes/patterns/spin-button.njk
new file mode 100644
index 0000000..6a935d0
--- /dev/null
+++ b/contents/_includes/patterns/spin-button.njk
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 2b25926..f15a73a 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -96,6 +96,7 @@ eleventyExcludeFromCollections: true
{% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}
{% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %}
{% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %}
+ {% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
diff --git a/contents/spin-button.md b/contents/spin-button.md
new file mode 100644
index 0000000..e728d0e
--- /dev/null
+++ b/contents/spin-button.md
@@ -0,0 +1,71 @@
+---
+layout: layouts/post.njk
+title: Spin button
+description: Create a spin button with CSS flexbox
+keywords: css flexbox, css spin button
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.spin-button {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ display: flex;
+ overflow: hidden;
+}
+
+.spin-button__input {
+ border-color: transparent;
+ padding: 0.5rem;
+
+ /* Demo */
+ width: 8rem;
+}
+
+.spin-button__buttons {
+ /* Content is centered vertically */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* Left border */
+ border-left: 1px solid #d1d5db;
+}
+
+.spin-button__button {
+ /* Reset */
+ background: #fff;
+ border-color: transparent;
+ cursor: pointer;
+
+ /* Make buttons have the same height */
+ flex: 1;
+}
+```
+
+You can use the [triangle buttons](/triangle-buttons/) to create the up and down buttons:
+
+{% demo %}{% include "patterns/spin-button.njk" %}{% enddemo %}
diff --git a/pages/spin-button/index.tsx b/pages/spin-button/index.tsx
deleted file mode 100644
index 4a3819c..0000000
--- a/pages/spin-button/index.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
- const [value, setValue] = React.useState(0);
- const decrease = () => setValue(value - 1);
- const increase = () => setValue(value + 1);
- const change = (e: React.ChangeEvent) => setValue(parseInt(e.target.value, 10));
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`}
- css={`
- .container {
- border: 1px solid #d1d5db;
- border-radius: 2px;
- display: flex;
- }
-
- .container__input {
- border-color: transparent;
- margin-right: 4px;
- padding: 4px;
- width: 100px;
- }
-
- .container__buttons {
- /* Content is centered vertically */
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
-
- .container__button {
- border-color: transparent;
- /* Make buttons have the same height */
- flex: 1;
- }
- `}
- >
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/spin-button/Cover.tsx b/patterns/spin-button/Cover.tsx
deleted file mode 100644
index a25ed0e..0000000
--- a/patterns/spin-button/Cover.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Triangle from '../../placeholders/Triangle';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index c4ab600..4509491 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -65,6 +65,7 @@
@import './patterns/search-box';
@import './patterns/separator';
@import './patterns/slider';
+@import './patterns/spin-button';
@import './patterns/stacked-cards';
@import './patterns/stamp-border';
@import './patterns/statistic';
diff --git a/styles/patterns/_spin-button.scss b/styles/patterns/_spin-button.scss
new file mode 100644
index 0000000..dc591f9
--- /dev/null
+++ b/styles/patterns/_spin-button.scss
@@ -0,0 +1,34 @@
+.spin-button {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ display: flex;
+ overflow: hidden;
+}
+
+.spin-button__input {
+ border-color: transparent;
+ padding: 0.5rem;
+
+ /* Demo */
+ width: 8rem;
+}
+
+.spin-button__buttons {
+ /* Content is centered vertically */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* Left border */
+ border-left: 1px solid #d1d5db;
+}
+
+.spin-button__button {
+ /* Reset */
+ background: #fff;
+ border-color: transparent;
+ cursor: pointer;
+
+ /* Make buttons have the same height */
+ flex: 1;
+}
\ No newline at end of file