Component: Button Migration 2: IconButton (#7598)

## Summary

Still a work in progress. Buttons with just icons are already in the
stories for button.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7)
by [Unito](https://www.unito.io)

src/components/ui/button/Button.stories.ts

@@ -47,7 +47,13 @@ function generateVariants() {
   for (const variant of variants) {
     for (const size of sizes) {
       variantButtons.push(
-        `<Button variant="${variant}" size="${size}">${size === 'icon' ? `<i class="icon-[lucide--settings]" />` : variant}</Button>`
+        `<Button 
+            variant="${variant}"
+            size="${size}">${
+              size.startsWith('icon')
+                ? `<i class="icon-[lucide--settings]" />`
+                : variant
+            }</Button>`
       )
     }
   }
@@ -59,7 +65,7 @@ export const AllVariants: Story = {
   render: () => ({
     components: { Button },
     template: `
-      <div class="grid grid-cols-4 gap-4 place-items-center-safe">
+      <div class="grid grid-cols-5 gap-4 place-items-center-safe">
       ${generateVariants().join('\n')}
         
       </div>

src/components/ui/button/button.variants.ts

@@ -22,7 +22,8 @@ export const buttonVariants = cva({
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
       md: 'h-8 rounded-lg p-2 text-xs',
       lg: 'h-10 rounded-lg px-4 py-2 text-sm',
-      icon: 'size-9'
+      icon: 'size-8',
+      'icon-sm': 'size-5 p-0'
     }
   },
 
@@ -42,7 +43,7 @@ const variants = [
   'textonly',
   'muted-textonly'
 ] as const satisfies Array<ButtonVariants['variant']>
-const sizes = ['sm', 'md', 'lg', 'icon'] as const satisfies Array<
+const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
   ButtonVariants['size']
 >