[{"data":1,"prerenderedAt":3554},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-button":407,"-docs-theme-components-composables-button-surround":3549},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":238,"body":409,"description":3543,"extension":995,"links":3544,"meta":3545,"navigation":206,"path":239,"seo":3546,"sitemap":3547,"stem":240,"__hash__":3548},"docs_theme/docs/theme/components/02.composables/02.button.md",{"type":410,"value":411,"toc":3513},"minimark",[412,416,434,441,445,448,482,486,1715,1718,1741,1744,1749,1752,1903,1910,1914,1922,1925,1928,1931,1934,1937,1940,1943,1946,1949,1952,1960,1963,1966,1969,1972,1975,1978,1981,1985,1994,1997,2001,2004,2097,2100,2115,2118,2121,2137,2278,2314,2400,2418,2422,2426,2431,2626,2630,2637,2814,2821,2824,2830,2833,2838,2959,2964,3057,3062,3066,3132,3136,3509],[413,414,64],"h2",{"id":415},"overview",[417,418,419,420,423,424,428,429,433],"p",{},"The ",[421,422,238],"strong",{}," is an interactive UI element used for triggering actions, submitting forms, and navigating between views. The ",[425,426,427],"code",{},"useButtonRecipe()"," composable creates a fully configured ",[430,431,432],"a",{"href":118},"recipe"," with color, variant, and size options — plus compound variants that handle the color-variant combinations automatically.",[417,435,436,437,440],{},"The Button recipe integrates directly with the default ",[430,438,439],{"href":157},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[413,442,444],{"id":443},"why-use-the-button-recipe","Why use the Button recipe?",[417,446,447],{},"The Button recipe helps you:",[449,450,451,458,464,470,476],"ul",{},[452,453,454,457],"li",{},[421,455,456],{},"Ship faster with sensible defaults",": Get 9 colors, 6 visual styles, and 5 sizes out of the box with a single composable call.",[452,459,460,463],{},[421,461,462],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including hover, focus, active, and dark mode states.",[452,465,466,469],{},[421,467,468],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[452,471,472,475],{},[421,473,474],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[452,477,478,481],{},[421,479,480],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[413,483,485],{"id":484},"usage","Usage",[487,488,490,495,502,750,754,761,1706,1710],"steps",{"level":489},"4",[491,492,494],"h4",{"id":493},"register-the-recipe","Register the recipe",[417,496,497,498,501],{},"Add the Button recipe to a local Styleframe instance. The global ",[425,499,500],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[503,504,506,642],"code-tree",{"default-value":505},"src/components/button.styleframe.ts",[507,508,513],"pre",{"className":509,"code":510,"filename":505,"language":511,"meta":512,"style":512},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s);\n\nexport default s;\n","ts","",[425,514,515,551,574,580,601,606,623,628],{"__ignoreMap":512},[516,517,520,524,528,532,535,538,541,545,548],"span",{"class":518,"line":519},"line",1,[516,521,523],{"class":522},"s7zQu","import",[516,525,527],{"class":526},"sMK4o"," {",[516,529,531],{"class":530},"sTEyZ"," styleframe",[516,533,534],{"class":526}," }",[516,536,537],{"class":522}," from",[516,539,540],{"class":526}," '",[516,542,544],{"class":543},"sfazB","virtual:styleframe",[516,546,547],{"class":526},"'",[516,549,550],{"class":526},";\n",[516,552,554,556,558,561,563,565,567,570,572],{"class":518,"line":553},2,[516,555,523],{"class":522},[516,557,527],{"class":526},[516,559,560],{"class":530}," useButtonRecipe",[516,562,534],{"class":526},[516,564,537],{"class":522},[516,566,540],{"class":526},[516,568,569],{"class":543},"@styleframe/theme",[516,571,547],{"class":526},[516,573,550],{"class":526},[516,575,577],{"class":518,"line":576},3,[516,578,579],{"emptyLinePlaceholder":206},"\n",[516,581,583,587,590,593,596,599],{"class":518,"line":582},4,[516,584,586],{"class":585},"spNyl","const",[516,588,589],{"class":530}," s ",[516,591,592],{"class":526},"=",[516,594,531],{"class":595},"s2Zo4",[516,597,598],{"class":530},"()",[516,600,550],{"class":526},[516,602,604],{"class":518,"line":603},5,[516,605,579],{"emptyLinePlaceholder":206},[516,607,609,611,614,616,618,621],{"class":518,"line":608},6,[516,610,586],{"class":585},[516,612,613],{"class":530}," button ",[516,615,592],{"class":526},[516,617,560],{"class":595},[516,619,620],{"class":530},"(s)",[516,622,550],{"class":526},[516,624,626],{"class":518,"line":625},7,[516,627,579],{"emptyLinePlaceholder":206},[516,629,631,634,637,640],{"class":518,"line":630},8,[516,632,633],{"class":522},"export",[516,635,636],{"class":522}," default",[516,638,639],{"class":530}," s",[516,641,550],{"class":526},[507,643,645],{"className":509,"code":644,"filename":500,"language":511,"meta":512,"style":512},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[425,646,647,668,695,699,713,717,726,735,739],{"__ignoreMap":512},[516,648,649,651,653,655,657,659,661,664,666],{"class":518,"line":519},[516,650,523],{"class":522},[516,652,527],{"class":526},[516,654,531],{"class":530},[516,656,534],{"class":526},[516,658,537],{"class":522},[516,660,540],{"class":526},[516,662,663],{"class":543},"styleframe",[516,665,547],{"class":526},[516,667,550],{"class":526},[516,669,670,672,674,677,680,683,685,687,689,691,693],{"class":518,"line":553},[516,671,523],{"class":522},[516,673,527],{"class":526},[516,675,676],{"class":530}," useDesignTokensPreset",[516,678,679],{"class":526},",",[516,681,682],{"class":530}," useUtilitiesPreset",[516,684,534],{"class":526},[516,686,537],{"class":522},[516,688,540],{"class":526},[516,690,569],{"class":543},[516,692,547],{"class":526},[516,694,550],{"class":526},[516,696,697],{"class":518,"line":576},[516,698,579],{"emptyLinePlaceholder":206},[516,700,701,703,705,707,709,711],{"class":518,"line":582},[516,702,586],{"class":585},[516,704,589],{"class":530},[516,706,592],{"class":526},[516,708,531],{"class":595},[516,710,598],{"class":530},[516,712,550],{"class":526},[516,714,715],{"class":518,"line":603},[516,716,579],{"emptyLinePlaceholder":206},[516,718,719,722,724],{"class":518,"line":608},[516,720,721],{"class":595},"useDesignTokensPreset",[516,723,620],{"class":530},[516,725,550],{"class":526},[516,727,728,731,733],{"class":518,"line":625},[516,729,730],{"class":595},"useUtilitiesPreset",[516,732,620],{"class":530},[516,734,550],{"class":526},[516,736,737],{"class":518,"line":630},[516,738,579],{"emptyLinePlaceholder":206},[516,740,742,744,746,748],{"class":518,"line":741},9,[516,743,633],{"class":522},[516,745,636],{"class":522},[516,747,639],{"class":530},[516,749,550],{"class":526},[491,751,753],{"id":752},"build-the-component","Build the component",[417,755,756,757,760],{},"Import the ",[425,758,759],{},"button"," runtime function from the virtual module and pass variant props to compute class names:",[762,763,764,1271],"tabs",{},[765,766,769],"tabs-item",{"icon":767,"label":768},"i-devicon-react","React",[507,770,773],{"className":509,"code":771,"filename":772,"language":511,"meta":512,"style":512},"import { button } from \"virtual:styleframe\";\n\ninterface ButtonProps {\n    color?: \"primary\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\";\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    disabled?: boolean;\n    children?: React.ReactNode;\n}\n\nexport function Button({\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"md\",\n    disabled = false,\n    children,\n}: ButtonProps) {\n    const classes = button({ color, variant, size });\n\n    return (\n        \u003Cbutton className={classes} disabled={disabled}>\n            {children}\n        \u003C/button>\n    );\n}\n","src/components/Button.tsx",[425,774,775,798,802,814,905,966,1018,1030,1048,1053,1058,1072,1090,1105,1120,1133,1140,1153,1191,1196,1205,1236,1247,1258,1266],{"__ignoreMap":512},[516,776,777,779,781,784,786,788,791,793,796],{"class":518,"line":519},[516,778,523],{"class":522},[516,780,527],{"class":526},[516,782,783],{"class":530}," button",[516,785,534],{"class":526},[516,787,537],{"class":522},[516,789,790],{"class":526}," \"",[516,792,544],{"class":543},[516,794,795],{"class":526},"\"",[516,797,550],{"class":526},[516,799,800],{"class":518,"line":553},[516,801,579],{"emptyLinePlaceholder":206},[516,803,804,807,811],{"class":518,"line":576},[516,805,806],{"class":585},"interface",[516,808,810],{"class":809},"sBMFI"," ButtonProps",[516,812,813],{"class":526}," {\n",[516,815,816,820,823,825,828,830,833,835,838,840,842,844,847,849,851,853,856,858,860,862,865,867,869,871,874,876,878,880,883,885,887,889,892,894,896,898,901,903],{"class":518,"line":582},[516,817,819],{"class":818},"swJcz","    color",[516,821,822],{"class":526},"?:",[516,824,790],{"class":526},[516,826,827],{"class":543},"primary",[516,829,795],{"class":526},[516,831,832],{"class":526}," |",[516,834,790],{"class":526},[516,836,837],{"class":543},"secondary",[516,839,795],{"class":526},[516,841,832],{"class":526},[516,843,790],{"class":526},[516,845,846],{"class":543},"success",[516,848,795],{"class":526},[516,850,832],{"class":526},[516,852,790],{"class":526},[516,854,855],{"class":543},"info",[516,857,795],{"class":526},[516,859,832],{"class":526},[516,861,790],{"class":526},[516,863,864],{"class":543},"warning",[516,866,795],{"class":526},[516,868,832],{"class":526},[516,870,790],{"class":526},[516,872,873],{"class":543},"error",[516,875,795],{"class":526},[516,877,832],{"class":526},[516,879,790],{"class":526},[516,881,882],{"class":543},"light",[516,884,795],{"class":526},[516,886,832],{"class":526},[516,888,790],{"class":526},[516,890,891],{"class":543},"dark",[516,893,795],{"class":526},[516,895,832],{"class":526},[516,897,790],{"class":526},[516,899,900],{"class":543},"neutral",[516,902,795],{"class":526},[516,904,550],{"class":526},[516,906,907,910,912,914,917,919,921,923,926,928,930,932,935,937,939,941,944,946,948,950,953,955,957,959,962,964],{"class":518,"line":603},[516,908,909],{"class":818},"    variant",[516,911,822],{"class":526},[516,913,790],{"class":526},[516,915,916],{"class":543},"solid",[516,918,795],{"class":526},[516,920,832],{"class":526},[516,922,790],{"class":526},[516,924,925],{"class":543},"outline",[516,927,795],{"class":526},[516,929,832],{"class":526},[516,931,790],{"class":526},[516,933,934],{"class":543},"soft",[516,936,795],{"class":526},[516,938,832],{"class":526},[516,940,790],{"class":526},[516,942,943],{"class":543},"subtle",[516,945,795],{"class":526},[516,947,832],{"class":526},[516,949,790],{"class":526},[516,951,952],{"class":543},"ghost",[516,954,795],{"class":526},[516,956,832],{"class":526},[516,958,790],{"class":526},[516,960,961],{"class":543},"link",[516,963,795],{"class":526},[516,965,550],{"class":526},[516,967,968,971,973,975,978,980,982,984,987,989,991,993,996,998,1000,1002,1005,1007,1009,1011,1014,1016],{"class":518,"line":608},[516,969,970],{"class":818},"    size",[516,972,822],{"class":526},[516,974,790],{"class":526},[516,976,977],{"class":543},"xs",[516,979,795],{"class":526},[516,981,832],{"class":526},[516,983,790],{"class":526},[516,985,986],{"class":543},"sm",[516,988,795],{"class":526},[516,990,832],{"class":526},[516,992,790],{"class":526},[516,994,995],{"class":543},"md",[516,997,795],{"class":526},[516,999,832],{"class":526},[516,1001,790],{"class":526},[516,1003,1004],{"class":543},"lg",[516,1006,795],{"class":526},[516,1008,832],{"class":526},[516,1010,790],{"class":526},[516,1012,1013],{"class":543},"xl",[516,1015,795],{"class":526},[516,1017,550],{"class":526},[516,1019,1020,1023,1025,1028],{"class":518,"line":625},[516,1021,1022],{"class":818},"    disabled",[516,1024,822],{"class":526},[516,1026,1027],{"class":809}," boolean",[516,1029,550],{"class":526},[516,1031,1032,1035,1037,1040,1043,1046],{"class":518,"line":630},[516,1033,1034],{"class":818},"    children",[516,1036,822],{"class":526},[516,1038,1039],{"class":809}," React",[516,1041,1042],{"class":526},".",[516,1044,1045],{"class":809},"ReactNode",[516,1047,550],{"class":526},[516,1049,1050],{"class":518,"line":741},[516,1051,1052],{"class":526},"}\n",[516,1054,1056],{"class":518,"line":1055},10,[516,1057,579],{"emptyLinePlaceholder":206},[516,1059,1061,1063,1066,1069],{"class":518,"line":1060},11,[516,1062,633],{"class":522},[516,1064,1065],{"class":585}," function",[516,1067,1068],{"class":595}," Button",[516,1070,1071],{"class":526},"({\n",[516,1073,1075,1078,1081,1083,1085,1087],{"class":518,"line":1074},12,[516,1076,819],{"class":1077},"sHdIc",[516,1079,1080],{"class":526}," =",[516,1082,790],{"class":526},[516,1084,900],{"class":543},[516,1086,795],{"class":526},[516,1088,1089],{"class":526},",\n",[516,1091,1093,1095,1097,1099,1101,1103],{"class":518,"line":1092},13,[516,1094,909],{"class":1077},[516,1096,1080],{"class":526},[516,1098,790],{"class":526},[516,1100,916],{"class":543},[516,1102,795],{"class":526},[516,1104,1089],{"class":526},[516,1106,1108,1110,1112,1114,1116,1118],{"class":518,"line":1107},14,[516,1109,970],{"class":1077},[516,1111,1080],{"class":526},[516,1113,790],{"class":526},[516,1115,995],{"class":543},[516,1117,795],{"class":526},[516,1119,1089],{"class":526},[516,1121,1123,1125,1127,1131],{"class":518,"line":1122},15,[516,1124,1022],{"class":1077},[516,1126,1080],{"class":526},[516,1128,1130],{"class":1129},"sfNiH"," false",[516,1132,1089],{"class":526},[516,1134,1136,1138],{"class":518,"line":1135},16,[516,1137,1034],{"class":1077},[516,1139,1089],{"class":526},[516,1141,1143,1146,1148,1151],{"class":518,"line":1142},17,[516,1144,1145],{"class":526},"}:",[516,1147,810],{"class":809},[516,1149,1150],{"class":526},")",[516,1152,813],{"class":526},[516,1154,1156,1159,1162,1164,1166,1169,1172,1175,1177,1180,1182,1185,1187,1189],{"class":518,"line":1155},18,[516,1157,1158],{"class":585},"    const",[516,1160,1161],{"class":530}," classes",[516,1163,1080],{"class":526},[516,1165,783],{"class":595},[516,1167,1168],{"class":818},"(",[516,1170,1171],{"class":526},"{",[516,1173,1174],{"class":530}," color",[516,1176,679],{"class":526},[516,1178,1179],{"class":530}," variant",[516,1181,679],{"class":526},[516,1183,1184],{"class":530}," size",[516,1186,534],{"class":526},[516,1188,1150],{"class":818},[516,1190,550],{"class":526},[516,1192,1194],{"class":518,"line":1193},19,[516,1195,579],{"emptyLinePlaceholder":206},[516,1197,1199,1202],{"class":518,"line":1198},20,[516,1200,1201],{"class":522},"    return",[516,1203,1204],{"class":818}," (\n",[516,1206,1208,1211,1213,1216,1219,1222,1225,1228,1230,1233],{"class":518,"line":1207},21,[516,1209,1210],{"class":526},"        \u003C",[516,1212,759],{"class":530},[516,1214,1215],{"class":530}," className",[516,1217,1218],{"class":526},"={",[516,1220,1221],{"class":530},"classes",[516,1223,1224],{"class":526},"}",[516,1226,1227],{"class":530}," disabled",[516,1229,1218],{"class":526},[516,1231,1232],{"class":530},"disabled",[516,1234,1235],{"class":526},"}>\n",[516,1237,1239,1242,1245],{"class":518,"line":1238},22,[516,1240,1241],{"class":526},"            {",[516,1243,1244],{"class":1077},"children",[516,1246,1052],{"class":526},[516,1248,1250,1253,1255],{"class":518,"line":1249},23,[516,1251,1252],{"class":526},"        \u003C/",[516,1254,759],{"class":530},[516,1256,1257],{"class":526},">\n",[516,1259,1261,1264],{"class":518,"line":1260},24,[516,1262,1263],{"class":818},"    )",[516,1265,550],{"class":526},[516,1267,1269],{"class":518,"line":1268},25,[516,1270,1052],{"class":526},[765,1272,1275],{"icon":1273,"label":1274},"i-devicon-vuejs","Vue",[507,1276,1281],{"className":1277,"code":1278,"filename":1279,"language":1280,"meta":512,"style":512},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { button } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"md\",\n    disabled = false,\n} = defineProps\u003C{\n    color?: \"primary\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\";\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    disabled?: boolean;\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cbutton :class=\"button({ color, variant, size })\" :disabled=\"disabled\">\n        \u003Cslot />\n    \u003C/button>\n\u003C/template>\n","src/components/Button.vue","vue",[425,1282,1283,1307,1327,1331,1337,1352,1367,1382,1393,1405,1483,1537,1583,1593,1602,1611,1615,1624,1679,1689,1698],{"__ignoreMap":512},[516,1284,1285,1288,1291,1294,1297,1299,1301,1303,1305],{"class":518,"line":519},[516,1286,1287],{"class":526},"\u003C",[516,1289,1290],{"class":818},"script",[516,1292,1293],{"class":585}," setup",[516,1295,1296],{"class":585}," lang",[516,1298,592],{"class":526},[516,1300,795],{"class":526},[516,1302,511],{"class":543},[516,1304,795],{"class":526},[516,1306,1257],{"class":526},[516,1308,1309,1311,1313,1315,1317,1319,1321,1323,1325],{"class":518,"line":553},[516,1310,523],{"class":522},[516,1312,527],{"class":526},[516,1314,783],{"class":530},[516,1316,534],{"class":526},[516,1318,537],{"class":522},[516,1320,790],{"class":526},[516,1322,544],{"class":543},[516,1324,795],{"class":526},[516,1326,550],{"class":526},[516,1328,1329],{"class":518,"line":576},[516,1330,579],{"emptyLinePlaceholder":206},[516,1332,1333,1335],{"class":518,"line":582},[516,1334,586],{"class":585},[516,1336,813],{"class":526},[516,1338,1339,1342,1344,1346,1348,1350],{"class":518,"line":603},[516,1340,1341],{"class":530},"    color ",[516,1343,592],{"class":526},[516,1345,790],{"class":526},[516,1347,900],{"class":543},[516,1349,795],{"class":526},[516,1351,1089],{"class":526},[516,1353,1354,1357,1359,1361,1363,1365],{"class":518,"line":608},[516,1355,1356],{"class":530},"    variant ",[516,1358,592],{"class":526},[516,1360,790],{"class":526},[516,1362,916],{"class":543},[516,1364,795],{"class":526},[516,1366,1089],{"class":526},[516,1368,1369,1372,1374,1376,1378,1380],{"class":518,"line":625},[516,1370,1371],{"class":530},"    size ",[516,1373,592],{"class":526},[516,1375,790],{"class":526},[516,1377,995],{"class":543},[516,1379,795],{"class":526},[516,1381,1089],{"class":526},[516,1383,1384,1387,1389,1391],{"class":518,"line":630},[516,1385,1386],{"class":530},"    disabled ",[516,1388,592],{"class":526},[516,1390,1130],{"class":1129},[516,1392,1089],{"class":526},[516,1394,1395,1397,1399,1402],{"class":518,"line":741},[516,1396,1224],{"class":526},[516,1398,1080],{"class":526},[516,1400,1401],{"class":595}," defineProps",[516,1403,1404],{"class":526},"\u003C{\n",[516,1406,1407,1409,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481],{"class":518,"line":1055},[516,1408,819],{"class":818},[516,1410,822],{"class":526},[516,1412,790],{"class":526},[516,1414,827],{"class":543},[516,1416,795],{"class":526},[516,1418,832],{"class":526},[516,1420,790],{"class":526},[516,1422,837],{"class":543},[516,1424,795],{"class":526},[516,1426,832],{"class":526},[516,1428,790],{"class":526},[516,1430,846],{"class":543},[516,1432,795],{"class":526},[516,1434,832],{"class":526},[516,1436,790],{"class":526},[516,1438,855],{"class":543},[516,1440,795],{"class":526},[516,1442,832],{"class":526},[516,1444,790],{"class":526},[516,1446,864],{"class":543},[516,1448,795],{"class":526},[516,1450,832],{"class":526},[516,1452,790],{"class":526},[516,1454,873],{"class":543},[516,1456,795],{"class":526},[516,1458,832],{"class":526},[516,1460,790],{"class":526},[516,1462,882],{"class":543},[516,1464,795],{"class":526},[516,1466,832],{"class":526},[516,1468,790],{"class":526},[516,1470,891],{"class":543},[516,1472,795],{"class":526},[516,1474,832],{"class":526},[516,1476,790],{"class":526},[516,1478,900],{"class":543},[516,1480,795],{"class":526},[516,1482,550],{"class":526},[516,1484,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527,1529,1531,1533,1535],{"class":518,"line":1060},[516,1486,909],{"class":818},[516,1488,822],{"class":526},[516,1490,790],{"class":526},[516,1492,916],{"class":543},[516,1494,795],{"class":526},[516,1496,832],{"class":526},[516,1498,790],{"class":526},[516,1500,925],{"class":543},[516,1502,795],{"class":526},[516,1504,832],{"class":526},[516,1506,790],{"class":526},[516,1508,934],{"class":543},[516,1510,795],{"class":526},[516,1512,832],{"class":526},[516,1514,790],{"class":526},[516,1516,943],{"class":543},[516,1518,795],{"class":526},[516,1520,832],{"class":526},[516,1522,790],{"class":526},[516,1524,952],{"class":543},[516,1526,795],{"class":526},[516,1528,832],{"class":526},[516,1530,790],{"class":526},[516,1532,961],{"class":543},[516,1534,795],{"class":526},[516,1536,550],{"class":526},[516,1538,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581],{"class":518,"line":1074},[516,1540,970],{"class":818},[516,1542,822],{"class":526},[516,1544,790],{"class":526},[516,1546,977],{"class":543},[516,1548,795],{"class":526},[516,1550,832],{"class":526},[516,1552,790],{"class":526},[516,1554,986],{"class":543},[516,1556,795],{"class":526},[516,1558,832],{"class":526},[516,1560,790],{"class":526},[516,1562,995],{"class":543},[516,1564,795],{"class":526},[516,1566,832],{"class":526},[516,1568,790],{"class":526},[516,1570,1004],{"class":543},[516,1572,795],{"class":526},[516,1574,832],{"class":526},[516,1576,790],{"class":526},[516,1578,1013],{"class":543},[516,1580,795],{"class":526},[516,1582,550],{"class":526},[516,1584,1585,1587,1589,1591],{"class":518,"line":1092},[516,1586,1022],{"class":818},[516,1588,822],{"class":526},[516,1590,1027],{"class":809},[516,1592,550],{"class":526},[516,1594,1595,1598,1600],{"class":518,"line":1107},[516,1596,1597],{"class":526},"}>",[516,1599,598],{"class":530},[516,1601,550],{"class":526},[516,1603,1604,1607,1609],{"class":518,"line":1122},[516,1605,1606],{"class":526},"\u003C/",[516,1608,1290],{"class":818},[516,1610,1257],{"class":526},[516,1612,1613],{"class":518,"line":1135},[516,1614,579],{"emptyLinePlaceholder":206},[516,1616,1617,1619,1622],{"class":518,"line":1142},[516,1618,1287],{"class":526},[516,1620,1621],{"class":818},"template",[516,1623,1257],{"class":526},[516,1625,1626,1629,1631,1634,1637,1639,1641,1643,1646,1649,1652,1655,1657,1660,1663,1665,1667,1669,1671,1673,1675,1677],{"class":518,"line":1155},[516,1627,1628],{"class":526},"    \u003C",[516,1630,759],{"class":818},[516,1632,1633],{"class":526}," :",[516,1635,1636],{"class":585},"class",[516,1638,592],{"class":526},[516,1640,795],{"class":526},[516,1642,759],{"class":595},[516,1644,1645],{"class":526},"({ ",[516,1647,1648],{"class":530},"color",[516,1650,1651],{"class":526},", ",[516,1653,1654],{"class":530},"variant",[516,1656,1651],{"class":526},[516,1658,1659],{"class":530},"size",[516,1661,1662],{"class":526}," })",[516,1664,795],{"class":526},[516,1666,1633],{"class":526},[516,1668,1232],{"class":585},[516,1670,592],{"class":526},[516,1672,795],{"class":526},[516,1674,1232],{"class":530},[516,1676,795],{"class":526},[516,1678,1257],{"class":526},[516,1680,1681,1683,1686],{"class":518,"line":1193},[516,1682,1210],{"class":526},[516,1684,1685],{"class":818},"slot",[516,1687,1688],{"class":526}," />\n",[516,1690,1691,1694,1696],{"class":518,"line":1198},[516,1692,1693],{"class":526},"    \u003C/",[516,1695,759],{"class":818},[516,1697,1257],{"class":526},[516,1699,1700,1702,1704],{"class":518,"line":1207},[516,1701,1606],{"class":526},[516,1703,1621],{"class":818},[516,1705,1257],{"class":526},[491,1707,1709],{"id":1708},"see-it-in-action","See it in action",[1711,1712],"story-preview",{"story":1713,":panel":1714},"theme-recipes-button--default","true",[413,1716,181],{"id":1717},"colors",[417,1719,1720,1721,1651,1723,1651,1725,1651,1727,1651,1729,1651,1731,1733,1734,1651,1736,1651,1738,1740],{},"The Button recipe includes 9 color variants: 6 semantic colors (",[425,1722,827],{},[425,1724,837],{},[425,1726,846],{},[425,1728,855],{},[425,1730,864],{},[425,1732,873],{},") plus 3 neutral-scale colors (",[425,1735,882],{},[425,1737,891],{},[425,1739,900],{},"). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including hover, focus, active, and dark mode states.",[1711,1742],{"story":1743,":panel":1714},"theme-recipes-button--success",[1745,1746,1748],"h3",{"id":1747},"color-reference","Color Reference",[1711,1750],{"story":1751},"theme-recipes-button--all-variants",[1753,1754,1755,1771],"table",{},[1756,1757,1758],"thead",{},[1759,1760,1761,1765,1768],"tr",{},[1762,1763,1764],"th",{},"Color",[1762,1766,1767],{},"Token",[1762,1769,1770],{},"Use Case",[1772,1773,1774,1789,1803,1817,1831,1845,1859,1877,1891],"tbody",{},[1759,1775,1776,1781,1786],{},[1777,1778,1779],"td",{},[425,1780,827],{},[1777,1782,1783],{},[425,1784,1785],{},"@color.primary",[1777,1787,1788],{},"Default actions, links, key information",[1759,1790,1791,1795,1800],{},[1777,1792,1793],{},[425,1794,837],{},[1777,1796,1797],{},[425,1798,1799],{},"@color.secondary",[1777,1801,1802],{},"Secondary actions, neutral states",[1759,1804,1805,1809,1814],{},[1777,1806,1807],{},[425,1808,846],{},[1777,1810,1811],{},[425,1812,1813],{},"@color.success",[1777,1815,1816],{},"Positive actions, confirmations, completions",[1759,1818,1819,1823,1828],{},[1777,1820,1821],{},[425,1822,855],{},[1777,1824,1825],{},[425,1826,1827],{},"@color.info",[1777,1829,1830],{},"Informational actions, tips, highlights",[1759,1832,1833,1837,1842],{},[1777,1834,1835],{},[425,1836,864],{},[1777,1838,1839],{},[425,1840,1841],{},"@color.warning",[1777,1843,1844],{},"Caution actions, pending states",[1759,1846,1847,1851,1856],{},[1777,1848,1849],{},[425,1850,873],{},[1777,1852,1853],{},[425,1854,1855],{},"@color.error",[1777,1857,1858],{},"Destructive actions, error states, alerts",[1759,1860,1861,1865,1874],{},[1777,1862,1863],{},[425,1864,882],{},[1777,1866,1867,1870,1871],{},[425,1868,1869],{},"@color.white"," / ",[425,1872,1873],{},"@color.gray-*",[1777,1875,1876],{},"Light surfaces, stays light in dark mode",[1759,1878,1879,1883,1888],{},[1777,1880,1881],{},[425,1882,891],{},[1777,1884,1885],{},[425,1886,1887],{},"@color.gray-900",[1777,1889,1890],{},"Dark surfaces, stays dark in light mode",[1759,1892,1893,1897,1900],{},[1777,1894,1895],{},[425,1896,900],{},[1777,1898,1899],{},"Adaptive (light ↔ dark)",[1777,1901,1902],{},"Default color, adapts to the current color scheme",[1904,1905,1906,1909],"tip",{},[421,1907,1908],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[413,1911,1913],{"id":1912},"variants","Variants",[417,1915,1916,1917,1921],{},"Six visual style variants control how the button is rendered. Each variant is combined with the selected color through ",[430,1918,1920],{"href":1919},"/docs/api/recipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[1745,1923,1924],{"id":916},"Solid",[417,1926,1927],{},"Filled background with light text. The most prominent style, ideal for primary actions and call-to-action buttons.",[1711,1929],{"story":1930,":panel":1714},"theme-recipes-button--solid",[1745,1932,1933],{"id":925},"Outline",[417,1935,1936],{},"Transparent background with colored border and text. Useful for secondary actions that shouldn't dominate the visual hierarchy.",[1711,1938],{"story":1939,":panel":1714},"theme-recipes-button--outline",[1745,1941,1942],{"id":934},"Soft",[417,1944,1945],{},"Light tinted background with colored text. A subtle but visible style that works well for tertiary actions and grouped controls.",[1711,1947],{"story":1948,":panel":1714},"theme-recipes-button--soft",[1745,1950,1951],{"id":943},"Subtle",[417,1953,1954,1955,1957,1958,1042],{},"Light tinted background with colored text and a matching border. Combines the softness of the ",[425,1956,934],{}," variant with the definition of ",[425,1959,925],{},[1711,1961],{"story":1962,":panel":1714},"theme-recipes-button--subtle",[1745,1964,1965],{"id":952},"Ghost",[417,1967,1968],{},"Transparent background with colored text that reveals a tinted background on hover. Ideal for toolbar actions and icon buttons where the button chrome should be invisible until interaction.",[1711,1970],{"story":1971,":panel":1714},"theme-recipes-button--ghost",[1745,1973,1974],{"id":961},"Link",[417,1976,1977],{},"Styled as an inline text link with no background or border. On hover, the text darkens and gains an underline. Use for navigation actions that should look like hyperlinks.",[1711,1979],{"story":1980,":panel":1714},"theme-recipes-button--link",[413,1982,1984],{"id":1983},"sizes","Sizes",[417,1986,1987,1988,1990,1991,1993],{},"Five size variants from ",[425,1989,977],{}," to ",[425,1992,1013],{}," control the font size, padding, gap, and border radius of the button.",[1711,1995],{"story":1996,":panel":1714},"theme-recipes-button--extra-large",[1745,1998,2000],{"id":1999},"size-reference","Size Reference",[1711,2002],{"story":2003},"theme-recipes-button--all-sizes",[1753,2005,2006,2019],{},[1756,2007,2008],{},[1759,2009,2010,2013,2016],{},[1762,2011,2012],{},"Size",[1762,2014,2015],{},"Font Size",[1762,2017,2018],{},"Border Radius",[1772,2020,2021,2037,2052,2066,2081],{},[1759,2022,2023,2027,2032],{},[1777,2024,2025],{},[425,2026,977],{},[1777,2028,2029],{},[425,2030,2031],{},"@font-size.xs",[1777,2033,2034],{},[425,2035,2036],{},"@border-radius.md",[1759,2038,2039,2043,2048],{},[1777,2040,2041],{},[425,2042,986],{},[1777,2044,2045],{},[425,2046,2047],{},"@font-size.sm",[1777,2049,2050],{},[425,2051,2036],{},[1759,2053,2054,2058,2062],{},[1777,2055,2056],{},[425,2057,995],{},[1777,2059,2060],{},[425,2061,2047],{},[1777,2063,2064],{},[425,2065,2036],{},[1759,2067,2068,2072,2077],{},[1777,2069,2070],{},[425,2071,1004],{},[1777,2073,2074],{},[425,2075,2076],{},"@font-size.md",[1777,2078,2079],{},[425,2080,2036],{},[1759,2082,2083,2087,2092],{},[1777,2084,2085],{},[425,2086,1013],{},[1777,2088,2089],{},[425,2090,2091],{},"@font-size.lg",[1777,2093,2094],{},[425,2095,2096],{},"@border-radius.lg",[413,2098,2099],{"id":1232},"Disabled",[417,2101,2102,2103,2106,2107,2110,2111,2114],{},"The Button recipe includes a built-in disabled state through the ",[425,2104,2105],{},"&:disabled"," pseudo-class. Disabled buttons have reduced opacity, a ",[425,2108,2109],{},"not-allowed"," cursor, and ",[425,2112,2113],{},"pointer-events: none"," to prevent interaction.",[1711,2116],{"story":2117,":panel":1714},"theme-recipes-button--disabled",[413,2119,302],{"id":2120},"accessibility",[449,2122,2123],{},[452,2124,2125,2128,2129,2132,2133,2136],{},[421,2126,2127],{},"Use semantic HTML."," Render buttons with ",[425,2130,2131],{},"\u003Cbutton>"," (or ",[425,2134,2135],{},"\u003Ca>"," for navigation) to get built-in keyboard support and screen reader announcements.",[507,2138,2142],{"className":2139,"code":2140,"language":2141,"meta":512,"style":512},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Correct: semantic button element -->\n\u003Cbutton class=\"...\">Save Changes\u003C/button>\n\n\u003C!-- Correct: link styled as button for navigation -->\n\u003Ca href=\"/settings\" class=\"...\">Settings\u003C/a>\n\n\u003C!-- Avoid: non-semantic element as button -->\n\u003Cdiv class=\"...\" onclick=\"save()\">Save Changes\u003C/div>\n","html",[425,2143,2144,2150,2180,2184,2189,2228,2232,2237],{"__ignoreMap":512},[516,2145,2146],{"class":518,"line":519},[516,2147,2149],{"class":2148},"sHwdD","\u003C!-- Correct: semantic button element -->\n",[516,2151,2152,2154,2156,2159,2161,2163,2166,2168,2171,2174,2176,2178],{"class":518,"line":553},[516,2153,1287],{"class":526},[516,2155,759],{"class":818},[516,2157,2158],{"class":585}," class",[516,2160,592],{"class":526},[516,2162,795],{"class":526},[516,2164,2165],{"class":543},"...",[516,2167,795],{"class":526},[516,2169,2170],{"class":526},">",[516,2172,2173],{"class":530},"Save Changes",[516,2175,1606],{"class":526},[516,2177,759],{"class":818},[516,2179,1257],{"class":526},[516,2181,2182],{"class":518,"line":576},[516,2183,579],{"emptyLinePlaceholder":206},[516,2185,2186],{"class":518,"line":582},[516,2187,2188],{"class":2148},"\u003C!-- Correct: link styled as button for navigation -->\n",[516,2190,2191,2193,2195,2198,2200,2202,2205,2207,2209,2211,2213,2215,2217,2219,2222,2224,2226],{"class":518,"line":603},[516,2192,1287],{"class":526},[516,2194,430],{"class":818},[516,2196,2197],{"class":585}," href",[516,2199,592],{"class":526},[516,2201,795],{"class":526},[516,2203,2204],{"class":543},"/settings",[516,2206,795],{"class":526},[516,2208,2158],{"class":585},[516,2210,592],{"class":526},[516,2212,795],{"class":526},[516,2214,2165],{"class":543},[516,2216,795],{"class":526},[516,2218,2170],{"class":526},[516,2220,2221],{"class":530},"Settings",[516,2223,1606],{"class":526},[516,2225,430],{"class":818},[516,2227,1257],{"class":526},[516,2229,2230],{"class":518,"line":608},[516,2231,579],{"emptyLinePlaceholder":206},[516,2233,2234],{"class":518,"line":625},[516,2235,2236],{"class":2148},"\u003C!-- Avoid: non-semantic element as button -->\n",[516,2238,2239,2241,2244,2246,2248,2250,2252,2254,2257,2259,2261,2264,2266,2268,2270,2272,2274,2276],{"class":518,"line":630},[516,2240,1287],{"class":526},[516,2242,2243],{"class":818},"div",[516,2245,2158],{"class":585},[516,2247,592],{"class":526},[516,2249,795],{"class":526},[516,2251,2165],{"class":543},[516,2253,795],{"class":526},[516,2255,2256],{"class":585}," onclick",[516,2258,592],{"class":526},[516,2260,795],{"class":526},[516,2262,2263],{"class":595},"save",[516,2265,598],{"class":543},[516,2267,795],{"class":526},[516,2269,2170],{"class":526},[516,2271,2173],{"class":530},[516,2273,1606],{"class":526},[516,2275,2243],{"class":818},[516,2277,1257],{"class":526},[449,2279,2280,2297],{},[452,2281,2282,2285,2286,2289,2290,2296],{},[421,2283,2284],{},"Focus visibility."," The recipe includes a ",[425,2287,2288],{},":focus-visible"," outline (2px solid, primary color, 2px offset) that appears only during keyboard navigation (",[430,2291,2295],{"href":2292,"rel":2293},"https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html",[2294],"nofollow","WCAG 2.4.7",").",[452,2298,2299,2302,2303,2306,2307,2310,2311,2313],{},[421,2300,2301],{},"Disabled state."," The ",[425,2304,2305],{},":disabled"," pseudo-class reduces opacity, sets ",[425,2308,2309],{},"cursor: not-allowed",", and disables pointer events. Always pair the visual style with the HTML ",[425,2312,1232],{}," attribute.",[507,2315,2317],{"className":2139,"code":2316,"language":2141,"meta":512,"style":512},"\u003C!-- Correct: visual style + HTML attribute -->\n\u003Cbutton class=\"...\" disabled>Submit\u003C/button>\n\n\u003C!-- Avoid: visual-only disabled state -->\n\u003Cbutton class=\"...\" style=\"opacity: 0.75\">Submit\u003C/button>\n",[425,2318,2319,2324,2353,2357,2362],{"__ignoreMap":512},[516,2320,2321],{"class":518,"line":519},[516,2322,2323],{"class":2148},"\u003C!-- Correct: visual style + HTML attribute -->\n",[516,2325,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2347,2349,2351],{"class":518,"line":553},[516,2327,1287],{"class":526},[516,2329,759],{"class":818},[516,2331,2158],{"class":585},[516,2333,592],{"class":526},[516,2335,795],{"class":526},[516,2337,2165],{"class":543},[516,2339,795],{"class":526},[516,2341,1227],{"class":585},[516,2343,2170],{"class":526},[516,2345,2346],{"class":530},"Submit",[516,2348,1606],{"class":526},[516,2350,759],{"class":818},[516,2352,1257],{"class":526},[516,2354,2355],{"class":518,"line":576},[516,2356,579],{"emptyLinePlaceholder":206},[516,2358,2359],{"class":518,"line":582},[516,2360,2361],{"class":2148},"\u003C!-- Avoid: visual-only disabled state -->\n",[516,2363,2364,2366,2368,2370,2372,2374,2376,2378,2381,2383,2385,2388,2390,2392,2394,2396,2398],{"class":518,"line":603},[516,2365,1287],{"class":526},[516,2367,759],{"class":818},[516,2369,2158],{"class":585},[516,2371,592],{"class":526},[516,2373,795],{"class":526},[516,2375,2165],{"class":543},[516,2377,795],{"class":526},[516,2379,2380],{"class":585}," style",[516,2382,592],{"class":526},[516,2384,795],{"class":526},[516,2386,2387],{"class":543},"opacity: 0.75",[516,2389,795],{"class":526},[516,2391,2170],{"class":526},[516,2393,2346],{"class":530},[516,2395,1606],{"class":526},[516,2397,759],{"class":818},[516,2399,1257],{"class":526},[1904,2401,2402,2405,2406,2408,2409,2411,2412,2414,2415,2417],{},[421,2403,2404],{},"Good practice:"," When buttons appear next to each other in a toolbar or form, use the ",[425,2407,1654],{}," prop to create visual hierarchy. For example, use ",[425,2410,916],{}," for the primary action and ",[425,2413,925],{}," or ",[425,2416,952],{}," for secondary actions.",[413,2419,2421],{"id":2420},"customization","Customization",[1745,2423,2425],{"id":2424},"overriding-defaults","Overriding Defaults",[417,2427,419,2428,2430],{},[425,2429,427],{}," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[507,2432,2434],{"className":509,"code":2433,"filename":505,"language":511,"meta":512,"style":512},"import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.full',\n    },\n    defaultVariants: {\n        color: 'success',\n        variant: 'soft',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[425,2435,2436,2456,2476,2480,2494,2498,2515,2525,2541,2546,2555,2570,2585,2600,2604,2612,2616],{"__ignoreMap":512},[516,2437,2438,2440,2442,2444,2446,2448,2450,2452,2454],{"class":518,"line":519},[516,2439,523],{"class":522},[516,2441,527],{"class":526},[516,2443,531],{"class":530},[516,2445,534],{"class":526},[516,2447,537],{"class":522},[516,2449,540],{"class":526},[516,2451,544],{"class":543},[516,2453,547],{"class":526},[516,2455,550],{"class":526},[516,2457,2458,2460,2462,2464,2466,2468,2470,2472,2474],{"class":518,"line":553},[516,2459,523],{"class":522},[516,2461,527],{"class":526},[516,2463,560],{"class":530},[516,2465,534],{"class":526},[516,2467,537],{"class":522},[516,2469,540],{"class":526},[516,2471,569],{"class":543},[516,2473,547],{"class":526},[516,2475,550],{"class":526},[516,2477,2478],{"class":518,"line":576},[516,2479,579],{"emptyLinePlaceholder":206},[516,2481,2482,2484,2486,2488,2490,2492],{"class":518,"line":582},[516,2483,586],{"class":585},[516,2485,589],{"class":530},[516,2487,592],{"class":526},[516,2489,531],{"class":595},[516,2491,598],{"class":530},[516,2493,550],{"class":526},[516,2495,2496],{"class":518,"line":603},[516,2497,579],{"emptyLinePlaceholder":206},[516,2499,2500,2502,2504,2506,2508,2511,2513],{"class":518,"line":608},[516,2501,586],{"class":585},[516,2503,613],{"class":530},[516,2505,592],{"class":526},[516,2507,560],{"class":595},[516,2509,2510],{"class":530},"(s",[516,2512,679],{"class":526},[516,2514,813],{"class":526},[516,2516,2517,2520,2523],{"class":518,"line":625},[516,2518,2519],{"class":818},"    base",[516,2521,2522],{"class":526},":",[516,2524,813],{"class":526},[516,2526,2527,2530,2532,2534,2537,2539],{"class":518,"line":630},[516,2528,2529],{"class":818},"        borderRadius",[516,2531,2522],{"class":526},[516,2533,540],{"class":526},[516,2535,2536],{"class":543},"@border-radius.full",[516,2538,547],{"class":526},[516,2540,1089],{"class":526},[516,2542,2543],{"class":518,"line":741},[516,2544,2545],{"class":526},"    },\n",[516,2547,2548,2551,2553],{"class":518,"line":1055},[516,2549,2550],{"class":818},"    defaultVariants",[516,2552,2522],{"class":526},[516,2554,813],{"class":526},[516,2556,2557,2560,2562,2564,2566,2568],{"class":518,"line":1060},[516,2558,2559],{"class":818},"        color",[516,2561,2522],{"class":526},[516,2563,540],{"class":526},[516,2565,846],{"class":543},[516,2567,547],{"class":526},[516,2569,1089],{"class":526},[516,2571,2572,2575,2577,2579,2581,2583],{"class":518,"line":1074},[516,2573,2574],{"class":818},"        variant",[516,2576,2522],{"class":526},[516,2578,540],{"class":526},[516,2580,934],{"class":543},[516,2582,547],{"class":526},[516,2584,1089],{"class":526},[516,2586,2587,2590,2592,2594,2596,2598],{"class":518,"line":1092},[516,2588,2589],{"class":818},"        size",[516,2591,2522],{"class":526},[516,2593,540],{"class":526},[516,2595,1004],{"class":543},[516,2597,547],{"class":526},[516,2599,1089],{"class":526},[516,2601,2602],{"class":518,"line":1107},[516,2603,2545],{"class":526},[516,2605,2606,2608,2610],{"class":518,"line":1122},[516,2607,1224],{"class":526},[516,2609,1150],{"class":530},[516,2611,550],{"class":526},[516,2613,2614],{"class":518,"line":1135},[516,2615,579],{"emptyLinePlaceholder":206},[516,2617,2618,2620,2622,2624],{"class":518,"line":1142},[516,2619,633],{"class":522},[516,2621,636],{"class":522},[516,2623,639],{"class":530},[516,2625,550],{"class":526},[1745,2627,2629],{"id":2628},"filtering-variants","Filtering Variants",[417,2631,2632,2633,2636],{},"If you only need a subset of the available variants, use the ",[425,2634,2635],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[507,2638,2640],{"className":509,"code":2639,"filename":505,"language":511,"meta":512,"style":512},"import { styleframe } from 'virtual:styleframe';\nimport { useButtonRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate primary and error colors, with solid and outline styles\nconst button = useButtonRecipe(s, {\n    filter: {\n        color: ['primary', 'error'],\n        variant: ['solid', 'outline'],\n    },\n});\n\nexport default s;\n",[425,2641,2642,2662,2682,2686,2700,2704,2709,2725,2734,2762,2788,2792,2800,2804],{"__ignoreMap":512},[516,2643,2644,2646,2648,2650,2652,2654,2656,2658,2660],{"class":518,"line":519},[516,2645,523],{"class":522},[516,2647,527],{"class":526},[516,2649,531],{"class":530},[516,2651,534],{"class":526},[516,2653,537],{"class":522},[516,2655,540],{"class":526},[516,2657,544],{"class":543},[516,2659,547],{"class":526},[516,2661,550],{"class":526},[516,2663,2664,2666,2668,2670,2672,2674,2676,2678,2680],{"class":518,"line":553},[516,2665,523],{"class":522},[516,2667,527],{"class":526},[516,2669,560],{"class":530},[516,2671,534],{"class":526},[516,2673,537],{"class":522},[516,2675,540],{"class":526},[516,2677,569],{"class":543},[516,2679,547],{"class":526},[516,2681,550],{"class":526},[516,2683,2684],{"class":518,"line":576},[516,2685,579],{"emptyLinePlaceholder":206},[516,2687,2688,2690,2692,2694,2696,2698],{"class":518,"line":582},[516,2689,586],{"class":585},[516,2691,589],{"class":530},[516,2693,592],{"class":526},[516,2695,531],{"class":595},[516,2697,598],{"class":530},[516,2699,550],{"class":526},[516,2701,2702],{"class":518,"line":603},[516,2703,579],{"emptyLinePlaceholder":206},[516,2705,2706],{"class":518,"line":608},[516,2707,2708],{"class":2148},"// Only generate primary and error colors, with solid and outline styles\n",[516,2710,2711,2713,2715,2717,2719,2721,2723],{"class":518,"line":625},[516,2712,586],{"class":585},[516,2714,613],{"class":530},[516,2716,592],{"class":526},[516,2718,560],{"class":595},[516,2720,2510],{"class":530},[516,2722,679],{"class":526},[516,2724,813],{"class":526},[516,2726,2727,2730,2732],{"class":518,"line":630},[516,2728,2729],{"class":818},"    filter",[516,2731,2522],{"class":526},[516,2733,813],{"class":526},[516,2735,2736,2738,2740,2743,2745,2747,2749,2751,2753,2755,2757,2760],{"class":518,"line":741},[516,2737,2559],{"class":818},[516,2739,2522],{"class":526},[516,2741,2742],{"class":530}," [",[516,2744,547],{"class":526},[516,2746,827],{"class":543},[516,2748,547],{"class":526},[516,2750,679],{"class":526},[516,2752,540],{"class":526},[516,2754,873],{"class":543},[516,2756,547],{"class":526},[516,2758,2759],{"class":530},"]",[516,2761,1089],{"class":526},[516,2763,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782,2784,2786],{"class":518,"line":1055},[516,2765,2574],{"class":818},[516,2767,2522],{"class":526},[516,2769,2742],{"class":530},[516,2771,547],{"class":526},[516,2773,916],{"class":543},[516,2775,547],{"class":526},[516,2777,679],{"class":526},[516,2779,540],{"class":526},[516,2781,925],{"class":543},[516,2783,547],{"class":526},[516,2785,2759],{"class":530},[516,2787,1089],{"class":526},[516,2789,2790],{"class":518,"line":1060},[516,2791,2545],{"class":526},[516,2793,2794,2796,2798],{"class":518,"line":1074},[516,2795,1224],{"class":526},[516,2797,1150],{"class":530},[516,2799,550],{"class":526},[516,2801,2802],{"class":518,"line":1092},[516,2803,579],{"emptyLinePlaceholder":206},[516,2805,2806,2808,2810,2812],{"class":518,"line":1107},[516,2807,633],{"class":522},[516,2809,636],{"class":522},[516,2811,639],{"class":530},[516,2813,550],{"class":526},[2815,2816,2817,2820],"note",{},[421,2818,2819],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[413,2822,59],{"id":2823},"api-reference",[1745,2825,2827],{"id":2826},"usebuttonrecipes-options",[425,2828,2829],{},"useButtonRecipe(s, options?)",[417,2831,2832],{},"Creates a full button recipe with all variants and compound variant styling.",[417,2834,2835],{},[421,2836,2837],{},"Parameters:",[1753,2839,2840,2853],{},[1756,2841,2842],{},[1759,2843,2844,2847,2850],{},[1762,2845,2846],{},"Parameter",[1762,2848,2849],{},"Type",[1762,2851,2852],{},"Description",[1772,2854,2855,2870,2885,2900,2914,2929,2944],{},[1759,2856,2857,2862,2867],{},[1777,2858,2859],{},[425,2860,2861],{},"s",[1777,2863,2864],{},[425,2865,2866],{},"Styleframe",[1777,2868,2869],{},"The Styleframe instance",[1759,2871,2872,2877,2882],{},[1777,2873,2874],{},[425,2875,2876],{},"options",[1777,2878,2879],{},[425,2880,2881],{},"DeepPartial\u003CRecipeConfig>",[1777,2883,2884],{},"Optional overrides for the recipe configuration",[1759,2886,2887,2892,2897],{},[1777,2888,2889],{},[425,2890,2891],{},"options.base",[1777,2893,2894],{},[425,2895,2896],{},"VariantDeclarationsBlock",[1777,2898,2899],{},"Custom base styles for the button",[1759,2901,2902,2907,2911],{},[1777,2903,2904],{},[425,2905,2906],{},"options.variants",[1777,2908,2909],{},[425,2910,1913],{},[1777,2912,2913],{},"Custom variant definitions for the recipe",[1759,2915,2916,2921,2926],{},[1777,2917,2918],{},[425,2919,2920],{},"options.defaultVariants",[1777,2922,2923],{},[425,2924,2925],{},"Record\u003Ckeyof Variants, string>",[1777,2927,2928],{},"Default variant values for the recipe",[1759,2930,2931,2936,2941],{},[1777,2932,2933],{},[425,2934,2935],{},"options.compoundVariants",[1777,2937,2938],{},[425,2939,2940],{},"CompoundVariant[]",[1777,2942,2943],{},"Custom compound variant definitions for the recipe",[1759,2945,2946,2951,2956],{},[1777,2947,2948],{},[425,2949,2950],{},"options.filter",[1777,2952,2953],{},[425,2954,2955],{},"Record\u003Cstring, string[]>",[1777,2957,2958],{},"Limit which variant values are generated",[417,2960,2961],{},[421,2962,2963],{},"Variants:",[1753,2965,2966,2979],{},[1756,2967,2968],{},[1759,2969,2970,2973,2976],{},[1762,2971,2972],{},"Variant",[1762,2974,2975],{},"Options",[1762,2977,2978],{},"Default",[1772,2980,2981,3011,3035],{},[1759,2982,2983,2987,3007],{},[1777,2984,2985],{},[425,2986,1648],{},[1777,2988,2989,1651,2991,1651,2993,1651,2995,1651,2997,1651,2999,1651,3001,1651,3003,1651,3005],{},[425,2990,827],{},[425,2992,837],{},[425,2994,846],{},[425,2996,855],{},[425,2998,864],{},[425,3000,873],{},[425,3002,882],{},[425,3004,891],{},[425,3006,900],{},[1777,3008,3009],{},[425,3010,900],{},[1759,3012,3013,3017,3031],{},[1777,3014,3015],{},[425,3016,1654],{},[1777,3018,3019,1651,3021,1651,3023,1651,3025,1651,3027,1651,3029],{},[425,3020,916],{},[425,3022,925],{},[425,3024,934],{},[425,3026,943],{},[425,3028,952],{},[425,3030,961],{},[1777,3032,3033],{},[425,3034,916],{},[1759,3036,3037,3041,3053],{},[1777,3038,3039],{},[425,3040,1659],{},[1777,3042,3043,1651,3045,1651,3047,1651,3049,1651,3051],{},[425,3044,977],{},[425,3046,986],{},[425,3048,995],{},[425,3050,1004],{},[425,3052,1013],{},[1777,3054,3055],{},[425,3056,995],{},[417,3058,3059],{},[430,3060,3061],{"href":118},"Learn more about recipes →",[413,3063,3065],{"id":3064},"best-practices","Best Practices",[449,3067,3068,3080,3098,3104,3113,3122],{},[452,3069,3070,3073,3074,3076,3077,3079],{},[421,3071,3072],{},"Choose colors by meaning, not appearance",": Use ",[425,3075,846],{}," for positive actions and ",[425,3078,873],{}," for destructive actions — this keeps your UI consistent when tokens change.",[452,3081,3082,3073,3085,3087,3088,2414,3090,3092,3093,2414,3095,3097],{},[421,3083,3084],{},"Establish a clear visual hierarchy",[425,3086,916],{}," for the primary action, ",[425,3089,925],{},[425,3091,934],{}," for secondary actions, and ",[425,3094,952],{},[425,3096,961],{}," for tertiary actions within the same context.",[452,3099,3100,3103],{},[421,3101,3102],{},"Stick to one or two sizes per context",": Mixing too many sizes in the same area creates visual noise. Pick a default size and use alternatives sparingly.",[452,3105,3106,3112],{},[421,3107,3108,3109,3111],{},"Use ",[425,3110,952],{}," for toolbars and icon buttons",": The transparent resting state keeps the interface clean while the hover state confirms interactivity.",[452,3114,3115,3118,3119,3121],{},[421,3116,3117],{},"Filter what you don't need",": If your component only uses a few variants, pass a ",[425,3120,2635],{}," option to reduce generated CSS.",[452,3123,3124,3127,3128,3131],{},[421,3125,3126],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[425,3129,3130],{},"defaultVariants"," so component consumers write less code.",[413,3133,3135],{"id":3134},"faq","FAQ",[3137,3138,3139,3179,3420,3441,3454,3478,3494],"accordion",{},[3140,3141,3144,3174],"accordion-item",{"icon":3142,"label":3143},"i-lucide-circle-help","How do compound variants work in the Button recipe?",[417,3145,3146,3147,3149,3150,3152,3153,3149,3155,3157,3158,1651,3161,3164,3165,3168,3169,3152,3171,3173],{},"The Button recipe uses compound variants to map each color-variant combination to specific styles. For example, when ",[425,3148,1648],{}," is ",[425,3151,827],{}," and ",[425,3154,1654],{},[425,3156,916],{},", the compound variant applies ",[425,3159,3160],{},"background: @color.primary",[425,3162,3163],{},"color: @color.white",", and ",[425,3166,3167],{},"borderColor: @color.primary-shade-50",", along with hover, focus, active, and dark mode overrides. This approach keeps the individual ",[425,3170,1648],{},[425,3172,1654],{}," definitions clean while handling all 54 combinations (9 colors × 6 variants) automatically.",[417,3175,3176],{},[430,3177,3178],{"href":1919},"Learn more about compound variants →",[3140,3180,3182,3192],{"icon":3142,"label":3181},"Can I add custom colors beyond the default six?",[417,3183,3184,3185,3152,3188,3191],{},"Yes. Override the ",[425,3186,3187],{},"variants.color",[425,3189,3190],{},"compoundVariants"," options to add new colors. You'll need to define the empty color variant and add compound variants for each visual style:",[507,3193,3195],{"className":509,"code":3194,"filename":505,"language":511,"meta":512,"style":512},"const button = useButtonRecipe(s, {\n    variants: {\n        color: {\n            brand: {},\n        },\n    },\n    compoundVariants: [\n        { match: { color: 'brand', variant: 'solid' }, css: { background: '@color.brand', color: '@color.white' } },\n        { match: { color: 'brand', variant: 'outline' }, css: { color: '@color.brand', borderColor: '@color.brand' } },\n        // ... soft, subtle, ghost, and link\n    ],\n});\n",[425,3196,3197,3213,3222,3230,3240,3245,3249,3259,3333,3400,3405,3412],{"__ignoreMap":512},[516,3198,3199,3201,3203,3205,3207,3209,3211],{"class":518,"line":519},[516,3200,586],{"class":585},[516,3202,613],{"class":530},[516,3204,592],{"class":526},[516,3206,560],{"class":595},[516,3208,2510],{"class":530},[516,3210,679],{"class":526},[516,3212,813],{"class":526},[516,3214,3215,3218,3220],{"class":518,"line":553},[516,3216,3217],{"class":818},"    variants",[516,3219,2522],{"class":526},[516,3221,813],{"class":526},[516,3223,3224,3226,3228],{"class":518,"line":576},[516,3225,2559],{"class":818},[516,3227,2522],{"class":526},[516,3229,813],{"class":526},[516,3231,3232,3235,3237],{"class":518,"line":582},[516,3233,3234],{"class":818},"            brand",[516,3236,2522],{"class":526},[516,3238,3239],{"class":526}," {},\n",[516,3241,3242],{"class":518,"line":603},[516,3243,3244],{"class":526},"        },\n",[516,3246,3247],{"class":518,"line":608},[516,3248,2545],{"class":526},[516,3250,3251,3254,3256],{"class":518,"line":625},[516,3252,3253],{"class":818},"    compoundVariants",[516,3255,2522],{"class":526},[516,3257,3258],{"class":530}," [\n",[516,3260,3261,3264,3267,3269,3271,3273,3275,3277,3280,3282,3284,3286,3288,3290,3292,3294,3297,3300,3302,3304,3307,3309,3311,3314,3316,3318,3320,3322,3324,3326,3328,3330],{"class":518,"line":630},[516,3262,3263],{"class":526},"        {",[516,3265,3266],{"class":818}," match",[516,3268,2522],{"class":526},[516,3270,527],{"class":526},[516,3272,1174],{"class":818},[516,3274,2522],{"class":526},[516,3276,540],{"class":526},[516,3278,3279],{"class":543},"brand",[516,3281,547],{"class":526},[516,3283,679],{"class":526},[516,3285,1179],{"class":818},[516,3287,2522],{"class":526},[516,3289,540],{"class":526},[516,3291,916],{"class":543},[516,3293,547],{"class":526},[516,3295,3296],{"class":526}," },",[516,3298,3299],{"class":818}," css",[516,3301,2522],{"class":526},[516,3303,527],{"class":526},[516,3305,3306],{"class":818}," background",[516,3308,2522],{"class":526},[516,3310,540],{"class":526},[516,3312,3313],{"class":543},"@color.brand",[516,3315,547],{"class":526},[516,3317,679],{"class":526},[516,3319,1174],{"class":818},[516,3321,2522],{"class":526},[516,3323,540],{"class":526},[516,3325,1869],{"class":543},[516,3327,547],{"class":526},[516,3329,534],{"class":526},[516,3331,3332],{"class":526}," },\n",[516,3334,3335,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371,3373,3375,3377,3379,3381,3383,3385,3388,3390,3392,3394,3396,3398],{"class":518,"line":741},[516,3336,3263],{"class":526},[516,3338,3266],{"class":818},[516,3340,2522],{"class":526},[516,3342,527],{"class":526},[516,3344,1174],{"class":818},[516,3346,2522],{"class":526},[516,3348,540],{"class":526},[516,3350,3279],{"class":543},[516,3352,547],{"class":526},[516,3354,679],{"class":526},[516,3356,1179],{"class":818},[516,3358,2522],{"class":526},[516,3360,540],{"class":526},[516,3362,925],{"class":543},[516,3364,547],{"class":526},[516,3366,3296],{"class":526},[516,3368,3299],{"class":818},[516,3370,2522],{"class":526},[516,3372,527],{"class":526},[516,3374,1174],{"class":818},[516,3376,2522],{"class":526},[516,3378,540],{"class":526},[516,3380,3313],{"class":543},[516,3382,547],{"class":526},[516,3384,679],{"class":526},[516,3386,3387],{"class":818}," borderColor",[516,3389,2522],{"class":526},[516,3391,540],{"class":526},[516,3393,3313],{"class":543},[516,3395,547],{"class":526},[516,3397,534],{"class":526},[516,3399,3332],{"class":526},[516,3401,3402],{"class":518,"line":1055},[516,3403,3404],{"class":2148},"        // ... soft, subtle, ghost, and link\n",[516,3406,3407,3410],{"class":518,"line":1060},[516,3408,3409],{"class":530},"    ]",[516,3411,1089],{"class":526},[516,3413,3414,3416,3418],{"class":518,"line":1074},[516,3415,1224],{"class":526},[516,3417,1150],{"class":530},[516,3419,550],{"class":526},[3140,3421,3423,3424,3152,3426,3428,3429,3431,3432,3434,3435,3437,3438,3440],{"icon":3142,"label":3422},"What's the difference between ghost and link variants?","Both ",[425,3425,952],{},[425,3427,961],{}," have a transparent resting state. The difference is that ",[425,3430,952],{}," reveals a tinted background on hover (like a toolbar button), while ",[425,3433,961],{}," adds an underline on hover (like a hyperlink). Use ",[425,3436,952],{}," for actions within a layout and ",[425,3439,961],{}," for inline navigation actions.",[3140,3442,3444,3445,3447,3448,3450,3451,3453],{"icon":3142,"label":3443},"What's the difference between soft and subtle variants?","Both use a light tinted background with colored text. The difference is that ",[425,3446,943],{}," also adds a matching colored border, giving the button more visual definition. Use ",[425,3449,934],{}," when you want a gentler appearance, and ",[425,3452,943],{}," when the button needs slightly more structure.",[3140,3455,3457,3458,3460,3461,3463,3464,3467,3468,1651,3470,1651,3472,3474,3475,3477],{"icon":3142,"label":3456},"How does filtering affect compound variants?","When you use the ",[425,3459,2635],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[425,3462,1654],{}," to only ",[425,3465,3466],{},"['solid', 'outline']",", all compound variants matching ",[425,3469,934],{},[425,3471,943],{},[425,3473,952],{},", or ",[425,3476,961],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[3140,3479,3481,3482,3484,3485,3487,3488,3490,3491,3493],{"icon":3142,"label":3480},"How do I handle the disabled state?","The Button recipe includes built-in disabled styles through the ",[425,3483,2105],{}," pseudo-class in the base configuration. It reduces opacity to 0.75, sets ",[425,3486,2309],{},", and disables pointer events. Pass the HTML ",[425,3489,1232],{}," attribute to your ",[425,3492,2131],{}," element to activate both the visual style and the accessibility semantics.",[3140,3495,3497,3498,1651,3500,3164,3502,3504,3505,3508],{"icon":3142,"label":3496},"Can I use the Button recipe without the design tokens preset?","The Button recipe references design tokens like ",[425,3499,1785],{},[425,3501,2047],{},[425,3503,2036],{}," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[425,3506,3507],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[3510,3511,3512],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":512,"searchDepth":553,"depth":553,"links":3514},[3515,3516,3517,3518,3521,3529,3532,3533,3534,3538,3541,3542],{"id":415,"depth":553,"text":64},{"id":443,"depth":553,"text":444},{"id":484,"depth":553,"text":485},{"id":1717,"depth":553,"text":181,"children":3519},[3520],{"id":1747,"depth":576,"text":1748},{"id":1912,"depth":553,"text":1913,"children":3522},[3523,3524,3525,3526,3527,3528],{"id":916,"depth":576,"text":1924},{"id":925,"depth":576,"text":1933},{"id":934,"depth":576,"text":1942},{"id":943,"depth":576,"text":1951},{"id":952,"depth":576,"text":1965},{"id":961,"depth":576,"text":1974},{"id":1983,"depth":553,"text":1984,"children":3530},[3531],{"id":1999,"depth":576,"text":2000},{"id":1232,"depth":553,"text":2099},{"id":2120,"depth":553,"text":302},{"id":2420,"depth":553,"text":2421,"children":3535},[3536,3537],{"id":2424,"depth":576,"text":2425},{"id":2628,"depth":576,"text":2629},{"id":2823,"depth":553,"text":59,"children":3539},[3540],{"id":2826,"depth":576,"text":2829},{"id":3064,"depth":553,"text":3065},{"id":3134,"depth":553,"text":3135},"An interactive control component for actions and navigation. Supports multiple colors, visual styles, sizes, and states through the recipe system.",null,{},{"title":238,"description":3543},{"loc":239},"bGl2Zco82XBkxf1AaM5dyfrHkDiIELi_aQOdJQ7nFvM",[3550,3552],{"title":234,"path":235,"stem":236,"description":3551,"children":-1},"A compact labeling component for status indicators, counts, and categorization. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":242,"path":243,"stem":244,"description":3553,"children":-1},"A layout component for grouping buttons with joined borders and shared orientation. Supports horizontal and vertical layouts plus full-width block mode through the recipe system.",1776621135143]