docs: add button variants

Author: scriptcoded

packages/storybook/package.json

@@ -15,6 +15,7 @@
     "dev": "storybook dev -p 6006 --no-open"
   },
   "dependencies": {
+    "@tabler/icons": "^3.35.0",
     "iconoir": "^7.11.0",
     "lodash.kebabcase": "^4.1.1",
     "react": "^19.2.0",

packages/storybook/src/stories/button.stories.tsx

@@ -1,4 +1,6 @@
 import { ScoutButton } from "@scouterna/ui-react";
+import LockIcon from "@tabler/icons/outline/lock.svg?raw";
+import TrashIcon from "@tabler/icons/outline/trash.svg?raw";
 import preview from "#.storybook/preview";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -18,5 +20,35 @@ export const Primary = meta.story({
   args: {
     variant: "primary",
   },
-  render: (args) => <ScoutButton {...args}>Hello, World!</ScoutButton>,
+  render: (args) => <ScoutButton {...args}>Sign in</ScoutButton>,
+});
+
+export const Outlined = meta.story({
+  args: {
+    variant: "outlined",
+  },
+  render: (args) => <ScoutButton {...args}>Show more</ScoutButton>,
+});
+
+export const Text = meta.story({
+  args: {
+    variant: "text",
+  },
+  render: (args) => <ScoutButton {...args}>Cancel</ScoutButton>,
+});
+
+export const Caution = meta.story({
+  args: {
+    variant: "caution",
+    icon: LockIcon,
+  },
+  render: (args) => <ScoutButton {...args}>Make private</ScoutButton>,
+});
+
+export const Danger = meta.story({
+  args: {
+    variant: "danger",
+    icon: TrashIcon,
+  },
+  render: (args) => <ScoutButton {...args}>Delete</ScoutButton>,
 });