diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx index 53d20d8eb7..5c7012c66a 100644 --- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx +++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx @@ -153,7 +153,8 @@ type PageHeaderAlign = "center" | "start"; type PageHeaderSize = "display" | "lg" | "md" | "sm"; const buttonVariants = ["outline", "fill", "secondary", "primary", "text"] as const; -const iconButtonVariants = ["quiet", "fill", "primary"] as const; +const iconButtonVariants = ["quiet", "outline", "fill", "primary"] as const; +const iconButtonSizes = ["xs", "standard", "sm", "md", "lg"] as const; const buttonInspectorStates = ["default", "hover", "active"] as const; const fieldOrientations = ["vertical", "horizontal"] as const; const pageHeaderAlignments = ["start", "center"] as const; @@ -309,6 +310,8 @@ export function ComponentDetailPage({ const { t } = useI18n(); const stateLabel = (state: string) => optionLabelKeys[state] ? t(optionLabelKeys[state]) : state; const [variant, setVariant] = useState<(typeof buttonVariants)[number]>("fill"); + const [iconButtonSize, setIconButtonSize] = useState<(typeof iconButtonSizes)[number]>("xs"); + const [iconButtonShape, setIconButtonShape] = useState<"square" | "circle">("square"); const [iconButtonVariant, setIconButtonVariant] = useState<(typeof iconButtonVariants)[number]>("quiet"); const [iconName, setIconName] = useState("search"); const [numberBadgeValue, setNumberBadgeValue] = useState("18"); @@ -519,7 +522,7 @@ export function ComponentDetailPage({ if (component.name === "IconButton") { const stateProps = `${inspectorDisabled ? " disabled" : ""}${inspectorLoading ? " loading" : ""}`; - return `import { IconButton } from "@openbitfun/ui";\nimport { List } from "lucide-react";\n\n}\n variant="${iconButtonVariant}"${stateProps}\n/>`; + return `import { IconButton } from "@openbitfun/ui";\nimport { List } from "lucide-react";\n\n}\n variant="${iconButtonVariant}"\n size="${iconButtonSize}"\n shape="${iconButtonShape}"${stateProps}\n/>`; } if (component.name === "Field") { const labelAction = fieldShowLabelAction @@ -633,6 +636,8 @@ export function ComponentDetailPage({ fieldShowLabelAction, flowChatPreview, iconButtonVariant, + iconButtonSize, + iconButtonShape, iconName, iconSize, iconTone, @@ -854,7 +859,8 @@ export function ComponentDetailPage({ disabled={state === "disabled" || applyInspectorControls && inspectorDisabled} icon={