diff --git a/src/docs/components/Button.mdx b/src/docs/components/Button.mdx
index c214fd3..5364da5 100644
--- a/src/docs/components/Button.mdx
+++ b/src/docs/components/Button.mdx
@@ -1,162 +1,152 @@
-import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
-import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
-import { ButtonDemo } from "./ButtonBlocks/Preview";
-import Examples from "./ButtonBlocks/Examples";
-
-# Button
-Displays a button or a component that looks like a button.
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-## Installation
-
-1. Create a new file `Button.tsx` in your component folder.
-2. Copy and paste the following code into the file.
-
-
-
-## Usage
-
-```tsx
-import { Button } from "@components/Button";
-```
-
-```html
-
-```
-
-## Props
-
-### Variants
-
-| Prop | Type | Default | Description |
-|:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
-| `size` | `"link" \| "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 |
-
-### Special
-
-| Prop | Type | Default | Description |
-|:----------|:----------|:--------|:---------------------------------------------------------|
-| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
-
-## Examples
-
-### Default
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Ghost
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Link
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Success
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Warning
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Danger
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
+import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB_COMP, GITHUB_STORY } from "@/components/LoadedCode";
+import Examples from "./ButtonBlocks/Examples";
+import ButtonPlayground from "./ButtonBlocks/Playground";
+
+# Button
+
+Displays a button or a component that looks like a button.
+
+## Playground
+
+
+
+## Installation
+
+1. Create a new file `Button.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+
+
+## Usage
+
+```tsx
+import { Button } from "@components/Button";
+```
+
+```html
+
+```
+
+## Props
+
+### Variants
+
+| Prop | Type | Default | Description |
+| :----------- | :---------------------------------------------------------------------------- | :---------- | :-------------------------------------- |
+| `size` | `"link" \| "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 |
+
+### Special
+
+| Prop | Type | Default | Description |
+| :-------- | :-------- | :------ | :------------------------------------------------------- |
+| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
+
+## Examples
+
+### Default
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Ghost
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Link
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Success
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Warning
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Danger
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
diff --git a/src/docs/components/ButtonBlocks/Playground.tsx b/src/docs/components/ButtonBlocks/Playground.tsx
new file mode 100644
index 0000000..4e05d0d
--- /dev/null
+++ b/src/docs/components/ButtonBlocks/Playground.tsx
@@ -0,0 +1,78 @@
+import {
+ GITHUB_COMP_PREVIEW,
+ LoadedCode,
+ type TEMPLATE,
+} from "@/components/LoadedCode";
+import { usePgProps } from "@/components/PgHooks";
+import { PlaygroundControl } from "@/components/Playground";
+import { Story } from "@/components/Story";
+import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
+import { ButtonDemo, type ControlledButtonDemoProps } from "./Preview";
+
+interface TemplateProps extends TEMPLATE, ControlledButtonDemoProps {}
+
+export default function ButtonPlayground() {
+ const [props, control] = usePgProps({
+ ButtonProps: {
+ preset: {
+ type: "select",
+ options: ["default", "ghost", "link", "success", "warning", "danger"],
+ value: "ghost",
+ },
+ size: {
+ type: "select",
+ options: ["link", "sm", "md", "lg", "icon"],
+ value: "md",
+ },
+ border: {
+ type: "select",
+ options: ["none", "solid", "success", "warning", "danger"],
+ value: "solid",
+ },
+ background: {
+ type: "select",
+ options: [
+ "default",
+ "ghost",
+ "success",
+ "warning",
+ "danger",
+ "transparent",
+ ],
+ value: "default",
+ },
+ decoration: {
+ type: "select",
+ options: ["none", "link"],
+ value: "none",
+ },
+ disabled: {
+ type: "boolean",
+ value: false,
+ },
+ },
+ });
+
+ return (
+ <>
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/docs/components/ButtonBlocks/Preview.tsx b/src/docs/components/ButtonBlocks/Preview.tsx
index 6d858d1..706c7d3 100644
--- a/src/docs/components/ButtonBlocks/Preview.tsx
+++ b/src/docs/components/ButtonBlocks/Preview.tsx
@@ -1,5 +1,38 @@
import { Button } from "@pswui/Button";
-
-export function ButtonDemo() {
- return ;
+/* remove */
+export interface ControlledButtonDemoProps {
+ ButtonProps: {
+ preset?: "default" | "ghost" | "link" | "success" | "warning" | "danger";
+ size?: "link" | "sm" | "md" | "lg" | "icon";
+ border?: "none" | "solid" | "success" | "warning" | "danger";
+ background?:
+ | "default"
+ | "ghost"
+ | "success"
+ | "warning"
+ | "danger"
+ | "transparent";
+ decoration?: "none" | "link";
+ disabled?: boolean;
+ };
+}
+/* end */
+/* replace */
+export function ButtonDemo({ ButtonProps }: ControlledButtonDemoProps) {
+ /* with
+export function ButtonDemo() {
+ */
+ return (
+
+ );
}