diff --git a/src/packages/core/src/toggle-button/toggle-button.css b/src/packages/core/src/toggle-button/toggle-button.css
new file mode 100644
index 0000000..e4818bd
--- /dev/null
+++ b/src/packages/core/src/toggle-button/toggle-button.css
@@ -0,0 +1,48 @@
+._e_toggle-button {
+  display: flex;
+}
+
+._e_toggle-button__item {
+  display: flex;
+  align-items: center;
+  height: var(--S32);
+  padding-left: var(--S12);
+  padding-right: var(--S12);
+  font: var(--Body1);
+  color: var(--N600);
+  white-space: nowrap;
+  border-width: 1px 0 1px 1px;
+  border-style: solid;
+  border-color: var(--N50);
+  background-color: var(--N0);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--N10);
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--S4);
+    border-bottom-left-radius: var(--S4);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--S4);
+    border-bottom-right-radius: var(--S4);
+    border-width: 1px;
+  }
+}
+
+._e_toggle-button__item_selected {
+  border-color: var(--B100);
+  background-color: var(--B50);
+  color: var(--B400);
+
+  &:hover {
+    background-color: var(--B100);
+  }
+
+  & + ._e_toggle-button__item {
+    border-left-color: var(--B100);
+  }
+}
diff --git a/src/packages/core/src/toggle-button/toggle-button.html b/src/packages/core/src/toggle-button/toggle-button.html
new file mode 100644
index 0000000..70233ac
--- /dev/null
+++ b/src/packages/core/src/toggle-button/toggle-button.html
@@ -0,0 +1,11 @@
+<div class="_e_toggle-button">
+  <div class="_e_toggle-button__item _e_toggle-button__item_selected">Item 0</div>
+  <div class="_e_toggle-button__item">Item 1</div>
+  <div class="_e_toggle-button__item _e_toggle-button__item_selected">Item 2</div>
+  <div class="_e_toggle-button__item _e_toggle-button__item_selected">Item 3</div>
+  <div class="_e_toggle-button__item">Item 4</div>
+  <div class="_e_toggle-button__item">Item 5</div>
+  <div class="_e_toggle-button__item _e_toggle-button__item_selected">Item 6</div>
+  <div class="_e_toggle-button__item">Item 7</div>
+  <div class="_e_toggle-button__item _e_toggle-button__item_selected">Item 8</div>
+</div>
diff --git a/src/packages/core/src/toggle-button/toggle-button.stories.mdx b/src/packages/core/src/toggle-button/toggle-button.stories.mdx
new file mode 100644
index 0000000..39ce670
--- /dev/null
+++ b/src/packages/core/src/toggle-button/toggle-button.stories.mdx
@@ -0,0 +1,14 @@
+import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
+import pretty from 'pretty';
+
+import toggleButton from './toggle-button.html';
+
+<Meta title='Core/ToggleButton' />
+
+# ToggleButton
+
+<Preview>
+  <Story name="default" height="160px" parameters={{ docs: { source: { code: pretty(toggleButton) } } }}>
+    { () => toggleButton }
+  </Story>
+</Preview>