diff --git a/packages/react/src/docs/components/Button.mdx b/packages/react/src/docs/components/Button.mdx
index 7354156..33fb0e1 100644
--- a/packages/react/src/docs/components/Button.mdx
+++ b/packages/react/src/docs/components/Button.mdx
@@ -46,22 +46,15 @@ import { Button } from "@components/Button";
 
 ### Props
 
-* `<Button />`
-    - `size`: `"sm" | "md" | "lg" | "icon"` 
-        * defaults to `"md"`
-        * padding & text size
-    - `border`: `"none" | "solid" | "success" | "warning" | "danger"` 
-        * defaults to `"solid"`
-        * border colors
-    - `background`: `"default" | "ghost" | "success" | "warning" | "danger" | "transparent"` 
-        * defaults to `"default"`
-        * background colors
-    - `decoration`: `"none" | "link"` 
-        * defaults to `"none"`
-        * inner text decorations
-    - `presets`: `"default" | "ghost" | "link" | "success" | "warning" | "danger"` 
-        * defaults to `"default"`
-        * preset of variant props
+#### Variants
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `size` | `"sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
+| `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button |
+| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button |
+| `decoration` | `"none" \| "link"` | `"none"` | The inner text decoration of the button |
+| `presets` | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"` | `"default"` | The preset of the variant props |
 
 ## Examples