fix(ui): align action button roles across product surfaces

Use primary for submit, save, create, and confirm actions, and fill for
cancel or dismiss actions. Correct shared confirmations, approval actions,
notifications, recommendations, Canvas primary mapping, and Design Lab
examples. Keep danger semantics and intentional selection/utility variants.

Preserve dimensions, callbacks, disabled/loading conditions, and transport
logic. Document variant roles and cover shared confirmation choices,
notification actions, settings actions, Canvas mapping, and AskUser output.

Validation: design-system:check; check:web; 20 shared action regression tests;
110 focused editor tests. Manual visual and live remote checks remain pending.

Author: kev1n77

design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx

@@ -552,7 +552,7 @@ export function ComponentDetailPage({
       return `import { Icon, Menu, MenuItem, MenuSection, MenuSeparator } from "@openbitfun/ui";\n\n<Menu\n  aria-label="${t("components.preview.menuLabel")}"\n  scrollbarVisibility="${menuShowScrollbar ? "auto" : "hidden"}"\n>\n  <MenuSection title="${t("components.preview.menuSectionTitle")}">\n    <MenuItem leading={<Icon name="session" />}>${t("components.preview.menuItemOne")}</MenuItem>\n    <MenuItem leading={<Icon name="session" />}>${t("components.preview.menuItemTwo")}</MenuItem>\n  </MenuSection>\n  <MenuSeparator />\n  <MenuSection aria-label="${t("components.preview.menuMoreSection")}">\n    <MenuItem disabled>${t("components.preview.menuDisabledItem")}</MenuItem>\n  </MenuSection>\n</Menu>`;
     }
     if (component.name === "Dialog") {
-      return `import { Button, Dialog, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogHeading, DialogTitle } from "@openbitfun/ui";\n\n<Dialog onOpenChange={() => setOpen(false)} open={open} size="xl">\n  <DialogHeader>\n    <DialogHeading><DialogTitle>${t("components.preview.modalTitle")}</DialogTitle></DialogHeading>\n    <DialogClose />\n  </DialogHeader>\n  <DialogBody><ProviderConfigurationFields /></DialogBody>\n  <DialogFooter appearance="floating">\n    <Button onClick={() => setOpen(false)} variant="secondary">${t("components.preview.modalCancel")}</Button>\n    <Button onClick={() => setOpen(false)} variant="primary">${t("components.preview.modalSave")}</Button>\n  </DialogFooter>\n</Dialog>`;
+      return `import { Button, Dialog, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogHeading, DialogTitle } from "@openbitfun/ui";\n\n<Dialog onOpenChange={() => setOpen(false)} open={open} size="xl">\n  <DialogHeader>\n    <DialogHeading><DialogTitle>${t("components.preview.modalTitle")}</DialogTitle></DialogHeading>\n    <DialogClose />\n  </DialogHeader>\n  <DialogBody><ProviderConfigurationFields /></DialogBody>\n  <DialogFooter appearance="floating">\n    <Button onClick={() => setOpen(false)} variant="fill">${t("components.preview.modalCancel")}</Button>\n    <Button onClick={() => setOpen(false)} variant="primary">${t("components.preview.modalSave")}</Button>\n  </DialogFooter>\n</Dialog>`;
     }
     if (component.name === "Sheet") {
       return `import { Button, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogHeading, DialogTitle, Sheet } from "@openbitfun/ui";\n\n<Sheet onOpenChange={() => setOpen(false)} open={open} placement="right" size="lg">\n  <DialogHeader>\n    <DialogHeading><DialogTitle>${t("components.preview.modalTitle")}</DialogTitle></DialogHeading>\n    <DialogClose />\n  </DialogHeader>\n  <DialogBody><ProviderConfigurationFields /></DialogBody>\n  <DialogFooter>\n    <Button onClick={() => setOpen(false)} variant="fill">${t("components.preview.modalCancel")}</Button>\n    <Button onClick={() => setOpen(false)} variant="primary">${t("components.preview.modalSave")}</Button>\n  </DialogFooter>\n</Sheet>`;
@@ -788,7 +788,7 @@ export function ComponentDetailPage({
           </DialogHeader>
           <DialogBody className="component-dialog-example__body">{renderDialogConfigurationContent()}</DialogBody>
           <DialogFooter appearance="floating">
-            <Button onClick={closePreview} variant="secondary">
+            <Button onClick={closePreview} variant="fill">
               {t("components.preview.modalCancel")}
             </Button>
             <Button onClick={closePreview} variant="primary">

design-system/apps/design-lab/src/pages/ComponentsPage.tsx

@@ -215,7 +215,7 @@ function ComponentCardPreview({ component }: { component: ComponentMeta }) {
     case "Button":
       return (
         <Stack align="center" direction="horizontal" gap="2" wrap>
-          <Button variant="fill">{t("components.preview.primary")}</Button>
+          <Button variant="primary">{t("components.preview.primary")}</Button>
           <Button>{t("components.preview.button")}</Button>
         </Stack>
       );

design-system/apps/design-lab/src/pages/PatternsPage.tsx

@@ -172,7 +172,7 @@ export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }:
           <Card appearance="subtle" className="pattern-device-card" data-openbitfun-pattern="device-card" gap="md" padding="md" radius="md">
             <CardHeader actions={<IconButton aria-label={t("patterns.device.refresh")} icon={<Icon name="refresh" />} size="sm" variant="quiet" />} description="macOS · 127.0.0.1" leading={<span className="pattern-device-icon"><Icon name="device-mac" size="lg" /></span>} title="MacBook Pro" />
             <CardBody><StatusPill leading={<Icon name="unselected" />} tone="success">{t("patterns.device.online")}</StatusPill></CardBody>
-            <Button leadingIcon={<Icon name="link" />} size="sm" variant="fill">{t("patterns.device.connect")}</Button>
+            <Button leadingIcon={<Icon name="link" />} size="sm" variant="primary">{t("patterns.device.connect")}</Button>
           </Card>
         </PatternSection>
         <PatternSection description={t("patterns.provider.description")} index="05" title={t("patterns.provider.title")}>

design-system/apps/design-lab/src/pages/ReferencePatterns.tsx

@@ -41,8 +41,8 @@ export function ProviderConfigurationPattern() {
   const [revision, setRevision] = useState(0);
   const [saved, setSaved] = useState(false);
   const footer = (close: () => void) => <CardFooter align="center">
-    <Button variant="outline" onClick={close}>{t("components.preview.modalCancel")}</Button>
-    <Button variant="fill" onClick={() => { setSaved(true); setOpen(false); }}>{t("components.preview.modalSave")}</Button>
+    <Button variant="fill" onClick={close}>{t("components.preview.modalCancel")}</Button>
+    <Button variant="primary" onClick={() => { setSaved(true); setOpen(false); }}>{t("components.preview.modalSave")}</Button>
   </CardFooter>;
 
   return <div className="pattern-provider" data-openbitfun-pattern="provider-configuration">

design-system/packages/ui/README.md

@@ -20,6 +20,13 @@ The package owns component anatomy, behavior, accessibility, and stable variants
 
 ## Buttons
 
+Choose variants by action role: use `primary` for the main save, submit, create,
+or confirm action, and `fill` for cancel, dismiss, or discard alongside it.
+Keep `outline` for ordinary toolbar utilities and secondary choices. A neutral
+`fill` button is a low-emphasis surface, not an alias for `primary`. Preserve
+`tone="danger"` for destructive actions. Disabled and loading states belong to
+the same variant; do not switch a primary action to outline when it is disabled.
+
 Button outline and text variants have transparent resting surfaces. Fill and
 primary state colors come from the theme's `component.button.*` contract, with
 variant-specific disabled content. The secondary variant keeps its opaque

design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -206,7 +206,7 @@ export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
             onClick={() => void runAction("confirm", onConfirm)}
             ref={confirmButtonRef}
             tone={confirmDanger || type === "error" ? "danger" : "neutral"}
-            variant={confirmDanger || type === "error" ? "primary" : "fill"}
+            variant="primary"
           >
             {resolvedConfirmText}
           </Button>

design-system/packages/ui/src/flow-chat/ask-user/AskUser.tsx

@@ -453,7 +453,7 @@ export const AskUser = forwardRef<HTMLDivElement, AskUserProps>(function AskUser
                 onClick={onSubmit}
                 size="sm"
                 title={submitTitle}
-                variant="fill"
+                variant="primary"
               >
                 {state === "submitting" && submittingLabel !== undefined
                   ? submittingLabel

design-system/packages/ui/tests/ask-user.test.mjs

@@ -70,6 +70,7 @@ test("AskUser renders a controlled custom answer with an accessible text field",
   assert.match(markup, /aria-label="Custom version"/);
   assert.match(markup, /value="v0.2.17"/);
   assert.match(markup, /data-openbitfun-part="submit"/);
+  assert.match(markup, /data-openbitfun-component="button"[^>]+data-openbitfun-variant="primary"/);
 });
 
 test("AskUser styles use public semantic and component geometry tokens", async () => {

src/web-ui/src/app/components/AboutDialog/AboutDialog.tsx

@@ -430,7 +430,7 @@ export const AboutDialog: React.FC<AboutDialogProps> = ({
                             <Icon name="check-circle" size="sm" className="openbitfun-about-dialog__update-status-icon" aria-hidden="true" />
                             <span>{t('update.readyVersion', { version: updateVersion ?? '' })}</span>
                           </div>
-                          <Button variant="fill" size="sm" disabled={updateStatus === 'installing'} onClick={onRestart}>
+                          <Button variant="primary" size="sm" disabled={updateStatus === 'installing'} onClick={onRestart}>
                             {t(updateStatus === 'installing' ? 'update.installing' : 'update.installAndRestart')}
                           </Button>
                         </div>

src/web-ui/src/app/components/AppErrorBoundary.tsx

@@ -76,7 +76,7 @@ export class AppErrorBoundary extends Component<Props, State> {
           <p style={{ margin: '12px 0 0', opacity: 0.9 }}>{firstLine}</p>
           <div style={{ marginTop: 16 }}>
             <Button
-              variant="fill"
+              variant="primary"
               size="sm"
               onClick={this.handleReload}
             >