diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 2a72d20..8d9acc7 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -8,6 +8,8 @@ initialize();
 const preview: Preview = {
   loaders: [mswLoader],
 
+  tags: ["autodocs"],
+
   parameters: {
     controls: {
       matchers: {
diff --git a/src/Components/Button.stories.tsx b/src/Components/Button.stories.tsx
new file mode 100644
index 0000000..535dd8a
--- /dev/null
+++ b/src/Components/Button.stories.tsx
@@ -0,0 +1,32 @@
+import { GlobeEuropeAfricaIcon } from "@heroicons/react/24/solid";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+
+  parameters: {
+    layout: "centered",
+  },
+
+  args: {
+    children: <span className="flex-grow">My Button</span>,
+    className: "!w-64",
+    onClick: fn(),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicButton: Story = {};
+
+export const ButtonWithIcon: Story = {
+  args: {
+    renderIcon: () => <GlobeEuropeAfricaIcon className="w-6" />,
+  },
+};
diff --git a/src/Components/Button.tsx b/src/Components/Button.tsx
index eb2aa71..dbc66b9 100644
--- a/src/Components/Button.tsx
+++ b/src/Components/Button.tsx
@@ -2,7 +2,8 @@ import classNames from "classnames";
 import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  renderIcon?: () => ReactElement;
+  /** A function that returns a React component to use as an icon */
+  readonly renderIcon?: () => ReactElement;
 }
 
 function Button({
@@ -10,7 +11,7 @@ function Button({
   className,
   renderIcon,
   ...props
-}: Readonly<PropsWithChildren<Props>>) {
+}: PropsWithChildren<Props>) {
   return (
     <button className={classNames(`group relative focus:ring-0`)} {...props}>
       <div
diff --git a/src/Components/Duration.tsx b/src/Components/Duration.tsx
index dbe134c..4879bd9 100644
--- a/src/Components/Duration.tsx
+++ b/src/Components/Duration.tsx
@@ -1,14 +1,14 @@
 import { Temporal } from "temporal-polyfill";
 
 interface DurationProps {
-  time: number;
+  readonly time: number;
 }
 
 function to2Digits(number: number) {
   return String(number).padStart(2, "0");
 }
 
-function Duration({ time }: Readonly<DurationProps>) {
+function Duration({ time }: DurationProps) {
   if (isNaN(time)) {
     time = 0;
   }