Create ButtonIconStack from frame buttons

app/components/reusable/ButtonIconStack/ButtonIconStack.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as ButtonIconStackStories from './ButtonIconStack.stories';
+
+<Meta of={ButtonIconStackStories} />
+
+# ButtonIconStackStories
+
+A button denotes a possible action to be taken on behalf of the user.
+
+This button shows only a single icon.
+
+<Canvas of={ButtonIconStackStories.Default} />

app/components/reusable/ButtonIconStack/ButtonIconStack.stories.tsx

@@ -0,0 +1,28 @@
+import { faImage } from "@fortawesome/pro-solid-svg-icons";
+import { withActions } from "@storybook/addon-actions/decorator";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ButtonIconStack } from "./ButtonIconStack";
+
+const meta: Meta<typeof ButtonIconStack> = {
+  component: ButtonIconStack,
+  parameters: {
+    actions: {
+      handles: ["click"],
+    },
+  },
+  decorators: [withActions],
+};
+
+type Story = StoryObj<typeof ButtonIconStack>;
+
+export const Default: Story = {
+  render: () => (
+    <ButtonIconStack
+      onClick={() => { }}
+      icon={faImage}
+      text={"Start Frame"}
+    />
+  ),
+};
+
+export default meta;

app/components/reusable/ButtonIconStack/ButtonIconStack.tsx

@@ -0,0 +1,39 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+interface ButtonIconStackProps {
+  icon: IconDefinition;
+  text: string;
+  onClick?: () => void;
+  style?: string;
+  additionalStyle?: string;
+}
+
+export function ButtonIconStack({
+  icon,
+  text = "",
+  onClick,
+  style,
+  additionalStyle,
+}: ButtonIconStackProps) {
+
+  const defaultStyle = twMerge(
+    "flex flex-col items-center justify-center text-xs transition-all duration-150",
+    "h-full w-full gap-1 p-2",
+    additionalStyle
+  )
+
+
+  return (
+    <button
+      className={style ?? defaultStyle}
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={icon} size="xl" />
+      {text && (
+        <span className="text-nowrap text-xs font-medium">{text}</span>
+      )}
+    </button>
+  );
+}

app/components/reusable/ButtonIconStack/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonIconStack";