diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
index 95193049..ad560894 100644
--- a/src/components/button/styles.ts
+++ b/src/components/button/styles.ts
@@ -57,6 +57,13 @@ const buttonColors = (dark: string, base: string, kind: string) => {
         return base;
     };
 
+    const borderColor = (): ColorGroup | string => {
+        if (isPrimary) return base;
+        if (isSecondary) return lightGrey;
+        if (isTertiary) return lightestGrey;
+        return dark;
+    };
+
     const hoverTextColor = (): ColorGroup | string => {
         if (isPrimary) return lightBase;
         if (isSecondary) return darkBase;
@@ -65,7 +72,7 @@ const buttonColors = (dark: string, base: string, kind: string) => {
     };
 
     return {
-        borderColor: isPrimary ? base : lightGrey,
+        borderColor: borderColor(),
         backgroundColor: isPrimary ? base : 'transparent',
         textColor: textColor(),
         hoverBackgroundColor: isPrimary ? dark : lightestGrey,
diff --git a/src/components/elevated/Elevated.spec.tsx b/src/components/elevated/Elevated.spec.tsx
index 0fc9c24c..227d3c19 100644
--- a/src/components/elevated/Elevated.spec.tsx
+++ b/src/components/elevated/Elevated.spec.tsx
@@ -6,8 +6,8 @@ import 'jest-styled-components';
 import { ThemeProvider } from '../theme-provider';
 import { Elevated, ElevationHeight } from './index';
 
-const setup = (Tag: React.ReactElement) =>
-    render(<ThemeProvider>{Tag}</ThemeProvider>);
+const setup = (Elevated: React.ReactElement) =>
+    render(<ThemeProvider>{Elevated}</ThemeProvider>);
 
 test('it works', () => {
     const { container } = setup(<Elevated>Hello world</Elevated>);
diff --git a/src/components/text/README.md b/src/components/text/README.md
deleted file mode 100644
index 5c5c6a73..00000000
--- a/src/components/text/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The Text component is a layout primitive for typography.
-
-```jsx harmony
-import { ThemeProvider, Text } from '@lapidist/components';
-
-<ThemeProvider>
-    <Text>Nunc porttitor lectus ex, eu pharetra elit placerat non. Suspendisse nec ultrices augue, et varius velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sollicitudin sed turpis et vulputate. Nam consequat porttitor scelerisque. Nulla ultricies enim at eros accumsan interdum. Aenean egestas enim mi, nec tincidunt libero gravida et.</Text>
-</ThemeProvider>
-```
diff --git a/src/components/toggle/Toggle.spec.tsx b/src/components/toggle/Toggle.spec.tsx
new file mode 100644
index 00000000..0a491c20
--- /dev/null
+++ b/src/components/toggle/Toggle.spec.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../theme-provider';
+import { ButtonKind } from '../button';
+import { Toggle } from './index';
+
+const setup = (Toggle: React.ReactElement) =>
+    render(<ThemeProvider>{Toggle}</ThemeProvider>);
+
+const kinds: ButtonKind[] = ['primary', 'secondary', 'tertiary', 'danger'];
+
+test('it works', () => {
+    kinds.forEach((kind) => {
+        const { container } = setup(<Toggle kind={kind}>Hello world</Toggle>);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+
+test('it works with checked', () => {
+    kinds.forEach((kind) => {
+        const { container } = setup(
+            <Toggle kind={kind} checked>
+                Hello world
+            </Toggle>
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
diff --git a/src/components/toggle/Toggle.stories.tsx b/src/components/toggle/Toggle.stories.tsx
new file mode 100644
index 00000000..19c1e126
--- /dev/null
+++ b/src/components/toggle/Toggle.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ThemeProvider } from '../theme-provider';
+import { Toggle } from './index';
+import { Box } from '../box';
+
+export default {
+    title: 'Components/Toggle',
+    component: Toggle,
+    decorators: [(getStory) => <ThemeProvider>{getStory()}</ThemeProvider>]
+};
+
+const DefaultTemplate = (args) => {
+    const [checked, setChecked] = React.useState(false);
+    return (
+        <Toggle
+            kind={args?.kind || 'primary'}
+            checked={checked}
+            onClick={() => setChecked(!checked)}
+            {...args}
+        />
+    );
+};
+
+export const SingleToggle = (args) => (
+    <DefaultTemplate {...args}>Toggle</DefaultTemplate>
+);
+
+export const MultiToggle = (args) => {
+    const [option1Checked, setOption1Checked] = React.useState(false);
+    const [option2Checked, setOption2Checked] = React.useState(false);
+
+    return (
+        <Box styles={{ display: 'flex', sizeGap: '2' }}>
+            <DefaultTemplate
+                kind="tertiary"
+                variant="medium"
+                checked={option1Checked}
+                onClick={() => setOption1Checked(!option1Checked)}
+                {...args}
+            >
+                Option 1
+            </DefaultTemplate>
+            <DefaultTemplate
+                kind="tertiary"
+                variant="medium"
+                checked={option2Checked}
+                onClick={() => setOption2Checked(!option2Checked)}
+                {...args}
+            >
+                Option 2
+            </DefaultTemplate>
+        </Box>
+    );
+};
diff --git a/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap b/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap
new file mode 100644
index 00000000..7418fc63
--- /dev/null
+++ b/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap
@@ -0,0 +1,977 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle "
+      data-icon="circle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works 2`] = `
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle "
+      data-icon="circle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works 3`] = `
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #73748b;
+  border-color: #fafafa;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #73748b;
+  border-color: #fafafa;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle "
+      data-icon="circle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works 4`] = `
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #b41e25;
+  border-color: #810000;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #810000;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #b41e25;
+  border-color: #810000;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #810000;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle "
+      data-icon="circle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works with checked 1`] = `
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-dot "
+      data-icon="circle-dot"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works with checked 2`] = `
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-dot "
+      data-icon="circle-dot"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works with checked 3`] = `
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #73748b;
+  border-color: #fafafa;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #73748b;
+  border-color: #fafafa;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-dot "
+      data-icon="circle-dot"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
+
+exports[`it works with checked 4`] = `
+.c2 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #b41e25;
+  border-color: #810000;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #810000;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 9999px;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+  color: #b41e25;
+  border-color: #810000;
+  border-top-color: #73748b;
+  border-right-color: #73748b;
+  border-bottom-color: #73748b;
+  border-left-color: #73748b;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #810000;
+}
+
+.c0:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c0:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<button
+  class="c0 sc-bcXHqe c1"
+>
+  <div
+    class="c2"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-dot "
+      data-icon="circle-dot"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style="margin-right: 0.5rem;"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 352C309 352 352 309 352 256C352 202.1 309 160 256 160C202.1 160 160 202.1 160 256C160 309 202.1 352 256 352z"
+        fill="currentColor"
+      />
+    </svg>
+    Hello world
+  </div>
+</button>
+`;
diff --git a/src/components/toggle/index.tsx b/src/components/toggle/index.tsx
new file mode 100644
index 00000000..3d167e3d
--- /dev/null
+++ b/src/components/toggle/index.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { withTheme } from 'styled-components';
+import { mergeStyles } from '@lapidist/styles';
+import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { toggleStyles } from './styles';
+import { Button, ButtonProps, ButtonPropType } from '../button';
+import { BoxProps } from '../box';
+
+export * from './styles';
+
+export type TogglePropType = BoxProps & ButtonProps & ButtonPropType;
+
+export interface ToggleProps {
+    readonly checked?: boolean;
+}
+
+const BaseToggle: React.FC<Omit<TogglePropType & ToggleProps, 'ref'>> = ({
+    styles,
+    checked,
+    children,
+    ...restProps
+}) => (
+    <Button
+        styles={mergeStyles(toggleStyles({ checked }), styles)}
+        icon={checked ? faDotCircle : faCircle}
+        {...restProps}
+    >
+        {children}
+    </Button>
+);
+
+export const Toggle = withTheme(BaseToggle);
+
+Toggle.displayName = 'Toggle';
diff --git a/src/components/toggle/styles.ts b/src/components/toggle/styles.ts
new file mode 100644
index 00000000..c084b5ac
--- /dev/null
+++ b/src/components/toggle/styles.ts
@@ -0,0 +1,19 @@
+import { Styles } from '@lapidist/styles';
+import { ToggleProps } from './index';
+
+export const toggleStyles = ({ checked }: ToggleProps): Styles =>
+    checked
+        ? {
+              borderRadius: 'rounded',
+              borderTopColor: { group: 'grey', shade: 'base' },
+              borderRightColor: { group: 'grey', shade: 'base' },
+              borderBottomColor: { group: 'grey', shade: 'base' },
+              borderLeftColor: { group: 'grey', shade: 'base' }
+          }
+        : {
+              borderRadius: 'rounded',
+              borderTopColor: { group: 'base', shade: 'transparent' },
+              borderRightColor: { group: 'base', shade: 'transparent' },
+              borderBottomColor: { group: 'base', shade: 'transparent' },
+              borderLeftColor: { group: 'base', shade: 'transparent' }
+          };