+
+// Default
+export const Default: Story = {
+ args: {
+ children: 'Button'
+ }
+}
+
+// Variants
+export const Secondary: Story = {
+ args: {
+ variant: 'secondary',
+ children: 'Secondary'
+ }
+}
+
+export const Destructive: Story = {
+ args: {
+ variant: 'destructive',
+ children: 'Destructive'
+ }
+}
+
+export const Outline: Story = {
+ args: {
+ variant: 'outline',
+ children: 'Outline'
+ }
+}
+
+export const Ghost: Story = {
+ args: {
+ variant: 'ghost',
+ children: 'Ghost'
+ }
+}
+
+export const Link: Story = {
+ args: {
+ variant: 'link',
+ children: 'Link'
+ }
+}
+
+// All Variants
+export const AllVariants: Story = {
+ render: () => (
+
+
+
+
+
+
+
+
+ )
+}
+
+// Sizes
+export const Small: Story = {
+ args: {
+ size: 'sm',
+ children: 'Small'
+ }
+}
+
+export const Large: Story = {
+ args: {
+ size: 'lg',
+ children: 'Large'
+ }
+}
+
+export const AllSizes: Story = {
+ render: () => (
+
+
+
+
+
+ )
+}
+
+// Icon Buttons
+export const IconButton: Story = {
+ render: () => (
+
+ )
+}
+
+export const AllIconSizes: Story = {
+ render: () => (
+
+
+
+
+
+ )
+}
+
+// With Icon
+export const WithIcon: Story = {
+ render: () => (
+
+
+
+
+
+ )
+}
+
+// Loading
+export const Loading: Story = {
+ render: () => (
+
+
+
+
+ )
+}
+
+// Rounded
+export const Rounded: Story = {
+ render: () => (
+
+
+
+
+
+ )
+}
+
+// States
+export const Disabled: Story = {
+ args: {
+ disabled: true,
+ children: 'Disabled'
+ }
+}
+
+export const AllStates: Story = {
+ render: () => (
+
+
+
+
+
+
+ )
+}
+
+// Full Width
+export const FullWidth: Story = {
+ render: () => (
+
+
+
+ )
+}
+
+// As Child - Composition Pattern
+// Note: asChild uses Radix UI's Slot component to merge Button's props
+// with a single child element. The child must support prop spreading.
+// Warning: asChild does NOT support loading prop (Slot requires single child)
+export const AsChild: Story = {
+ render: () => (
+
+
+
+
+
+ Note: The{' '}
+ asChild prop does not work with{' '}
+ loading because Radix Slot
+ requires a single child element.
+
+
+
+ {/* Action Buttons */}
+
+
Action Buttons
+
+
+
+
+
+
+
+ {/* Icon Buttons */}
+
+
Icon Buttons
+
+
+
+
+
+
+
+ {/* Loading States */}
+
+
Loading States
+
+
+
+
+
+
+ {/* With Icons */}
+
+
Buttons with Icons
+
+
+
+
+
+
+ {/* Rounded Variants */}
+
+
Rounded Buttons
+
+
+
+
+
+
+