@multiplatform.one/forms 7.67.0 → 7.68.0

package/src/Button/index.tsx

@@ -72,6 +72,7 @@ import { formatActionLabel } from "../actionLabel";
 import { formButtonColors, formCommonColors } from "../shared/colorRamps";
 import { warnBareDisabled, warnPositiveTabIndex, warnSizeRecipeEscape } from "../shared/devWarn";
 import { useControlGrouped } from "../shared/groupContext";
+import { loadGlassView } from "./glass";
 
 /**
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
@@ -382,6 +383,66 @@ export interface ButtonProps extends Omit<
    * button that paints a frame, while selected, or disabled.
    */
   accentInk?: boolean;
+  /**
+   * LC-176 ICON-BUTTON: an icon-only button is a bare glyph in the bar tint,
+   * no fill and no border, on a 44pt target. `plate="media"` is the one
+   * plated case: a translucent material circle for a control floating over
+   * an image or video, where a bare glyph would be lost on the picture.
+   * `plate="primary"` is the overlay's one confirm (LC-260): an accent-filled
+   * circle with an on-fill glyph, the iOS 26 sheet's checkmark.
+   */
+  plate?: "media" | "primary";
+  /**
+   * LC-176: an icon button inline with a value (copy beside an address): the
+   * glyph is sized to the text, tinted, 8pt after it, and keeps the 44pt
+   * target through slop rather than a box that would grow the line.
+   */
+  inline?: boolean;
+  /**
+   * LC-176: the glyph's stroke weight, matched to the text beside it. Phosphor
+   * regular for a tinted glyph, bold for a neutral one; never thin or light.
+   */
+  glyphWeight?: "regular" | "bold";
+}
+
+/** LC-176: a pressed icon button dims on native, the iOS bar-button highlight. */
+export const ICON_BUTTON_PRESS_OPACITY = 0.35;
+
+/**
+ * LC-176: a bar or row icon button's glyph floor (HIG 22-24pt in a 44pt
+ * target). A bare glyph carries its own weight, so it never shrinks to the
+ * label-icon size of a small control.
+ */
+export const ICON_BUTTON_GLYPH_PX = 22;
+
+/**
+ * LC-176: a neutral icon button (content, no intent: no tint to carry it) is
+ * a bold monochrome glyph at 24pt or more, the Instagram / Threads weight.
+ */
+export const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
+
+/** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
+const INLINE_GLYPH_RATIO = 1.2;
+
+function withGlyphWeight(
+  icon: IconLike | undefined,
+  size: number,
+  weight: "regular" | "bold",
+): IconLike | undefined {
+  if (icon == null || icon === false) return icon;
+  if (isValidElement<{ size?: number; weight?: string }>(icon)) {
+    return cloneElement(icon, {
+      ...(icon.props.size == null ? { size } : undefined),
+      ...(icon.props.weight == null ? { weight } : undefined),
+    });
+  }
+  if (typeof icon === "function" || (typeof icon === "object" && "$$typeof" in icon)) {
+    return createElement(icon as ComponentType<{ size?: number; weight?: string }>, {
+      size,
+      weight,
+    });
+  }
+  return icon;
 }
 
 export function Button({
@@ -408,6 +469,9 @@ export function Button({
   chromeless,
   edge,
   accentInk,
+  plate,
+  inline,
+  glyphWeight,
   verb,
   noun,
   actionRole,
@@ -465,8 +529,9 @@ export function Button({
     (s) => ({ isValid: s.isValid ?? true }),
   );
 
+  const primaryPlate = plate === "primary";
   const intent =
-    (accent && "accent") ||
+    ((accent || primaryPlate) && "accent") ||
     (error && "error") ||
     (warning && "warning") ||
     (success && "success") ||
@@ -486,12 +551,36 @@ export function Button({
   const hostAccentInk = useAccentOnSurface();
   const hostIdentityInk = useIdentityInkOnSurface();
   const grouped = useControlGrouped();
+  // LC-176 ICON-BUTTON: with no label, the button is its glyph. It paints no
+  // plate at rest and takes the bar tint, unless the caller asked for a frame
+  // (`outlined`, `circular`, `chromeless={false}`) or a segment owns it.
+  const labelled = verb != null || (children != null && children !== false && children !== "");
+  const iconOnly = !labelled && Boolean(icon || iconAfter);
+  const mediaPlate = iconOnly && plate === "media";
+  const confirmPlate = iconOnly && primaryPlate;
+  const iconButton =
+    iconOnly &&
+    !mediaPlate &&
+    !confirmPlate &&
+    !grouped &&
+    chromeless !== false &&
+    outlined !== true &&
+    !circular;
   // LC-153 CONTROL-TIERS: a bar paints its neutral buttons plain; content
   // paints them tinted. The scheme picks the wash step.
   // A Button is most overlays' trigger: the modality must be known before its
   // opening key press, or the open focus cannot tell keyboard from pointer.
   if (isWeb) ensureKeyboardModalityTracking();
   const barSurface = useBarSurface();
+  // LC-176: the context picks the icon button's treatment, never the app. In a
+  // bar it takes the bar tint (the accent, on Liquid Glass where iOS draws
+  // it); in content, with no intent, it is a bold glyph in the text colour.
+  const neutralGlyph = iconButton && !(theme ?? intent) && !barSurface && accentInk == null;
+  if (iconButton) {
+    chromeless = true;
+    accentInk = accentInk ?? (!(theme ?? intent) && barSurface);
+  }
+  const resolvedGlyphWeight = glyphWeight ?? (neutralGlyph ? "bold" : "regular");
   const elevatedGround = useElevatedSurface();
   const darkScheme = isDarkThemeName(useThemeName());
   const resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
@@ -590,25 +679,34 @@ export function Button({
   const washOnHost = Boolean(
     unavailable && activeThemeName && solidPaletteThemes.has(activeThemeName),
   );
-  const disabledSurface = tierDisabled
-    ? {
-        ...disabledState.surfaceKnobProps,
-        backgroundColor: tierDisabled.backgroundColor,
-        borderColor: tierDisabled.borderColor,
-      }
-    : washOnHost
-      ? hostScoped(disabledState.surfaceKnobProps)
-      : disabledState.surfaceKnobProps;
-  const disabledText = tierDisabled
-    ? { ...disabledState.textKnobProps, color: tierDisabled.color }
-    : washOnHost
-      ? hostScoped(disabledState.textKnobProps)
-      : activeThemeName &&
-          solidButtonIntents.has(activeThemeName) &&
-          disabledState.textKnobProps.color
-        ? { ...disabledState.textKnobProps, color: "$color12" }
-        : disabledState.textKnobProps;
-  outlined = tier ? false : (outlined ?? knobProps.outlined);
+  // LC-40: a chromeless button has no chrome to wash. A fill would make the
+  // disabled twin (a pager's first-page chevron) read as more prominent than
+  // the enabled one, so it keeps its frameless look and its ink dims.
+  const frameless = Boolean(chromeless);
+  const disabledSurface = frameless
+    ? disabledState.glyphKnobProps
+    : tierDisabled
+      ? {
+          ...disabledState.surfaceKnobProps,
+          backgroundColor: tierDisabled.backgroundColor,
+          borderColor: tierDisabled.borderColor,
+        }
+      : washOnHost
+        ? hostScoped(disabledState.surfaceKnobProps)
+        : disabledState.surfaceKnobProps;
+  const disabledText: { color?: string } = frameless
+    ? {}
+    : tierDisabled
+      ? { ...disabledState.textKnobProps, color: tierDisabled.color }
+      : washOnHost
+        ? hostScoped(disabledState.textKnobProps)
+        : activeThemeName &&
+            solidButtonIntents.has(activeThemeName) &&
+            disabledState.textKnobProps.color
+          ? { ...disabledState.textKnobProps, color: "$color12" }
+          : disabledState.textKnobProps;
+  outlined =
+    tier || iconButton || mediaPlate || confirmPlate ? false : (outlined ?? knobProps.outlined);
   const isLow = knobProps.textAccent === "low";
   const isMedium = knobProps.textAccent === "medium";
   const resolvedBorderWidth = knobProps.borderRadius.borderWidth;
@@ -641,18 +739,22 @@ export function Button({
   // (measured 1.02–1.06:1 on the page in both schemes). At the default
   // textAccent (`high`, textColor undefined) the label must re-anchor to the
   // same readable text tier the frame uses.
+  // LC-176: an intent icon button is a glyph on the page too, so it takes
+  // the outlined button's on-page ink.
+  const onPage = outlined || iconButton;
   const outlinedIntentInk = Boolean(
-    outlined && activeThemeName && solidButtonIntents.has(activeThemeName),
+    onPage && activeThemeName && solidButtonIntents.has(activeThemeName),
   );
   // MPO-447: a solid-palette theme (accent) has no readable-on-page step at
   // all, `$color11` included, so an outlined one takes its ink from the host:
   // the accent that clears AA there, or host-scoped text under a textAccent.
   const outlinedOnHost = Boolean(
-    outlined && activeThemeName && solidPaletteThemes.has(activeThemeName),
+    onPage && activeThemeName && solidPaletteThemes.has(activeThemeName),
   );
   const outlinedInk = outlinedOnHost ? hostAccentInk : outlinedIntentInk ? "$color11" : undefined;
 
-  const resolvedRole: ButtonActionRole | undefined = actionRole ?? (accent ? "primary" : undefined);
+  const resolvedRole: ButtonActionRole | undefined =
+    actionRole ?? (accent || confirmPlate ? "primary" : undefined);
   const labelFromParts =
     children == null && verb != null ? formatActionLabel({ verb, noun }) : null;
   const resolvedChildren = children ?? labelFromParts;
@@ -661,11 +763,38 @@ export function Button({
   ];
   const isSelected =
     selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : undefined);
-  const selectedFill = Boolean(isSelected) && !unavailable;
+  // The media plate is its own state ground; a toggle over media shows its
+  // state in the glyph.
+  const selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate;
   const barInk = accentInk && chromeless && !selectedFill && !unavailable ? hostIdentityInk : null;
+  const inlineGlyph = iconButton && inline === true && !nested;
+  // LC-176: back's caret beside its label is a bar glyph too, and so is the
+  // glyph on a plate (media, or the overlay's confirm).
+  const barGlyph =
+    ((iconButton || mediaPlate || confirmPlate) && !nested) ||
+    (labelled && chromeless && accentInk === true && edge === "start");
+  const glyphFloor =
+    neutralGlyph && !inlineGlyph ? ICON_BUTTON_NEUTRAL_GLYPH_PX : ICON_BUTTON_GLYPH_PX;
+  // LC-176: on iOS 26 a bar's icon button floats on Liquid Glass, the native
+  // bar button. Elsewhere, and on a binary without the module, it stays the
+  // bare tinted glyph.
+  const GlassView =
+    iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill
+      ? loadGlassView()
+      : null;
   const iconSize = nested
     ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45)))
-    : recipe.iconSize;
+    : inlineGlyph
+      ? Math.round(recipe.fontSize * INLINE_GLYPH_RATIO)
+      : barGlyph
+        ? touch
+          ? Math.max(glyphFloor, resolveButtonSizeRecipe("$6", recipeFamily, touch).iconSize)
+          : // A pointer toolbar keeps its token box (LC-54); the glyph fills it
+            // up to the same floor.
+            Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
+        : recipe.iconSize;
+  const glyph =
+    barGlyph || inlineGlyph ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight) : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
   // label grows only as far as that height holds: its em and its line, which
@@ -740,21 +869,25 @@ export function Button({
     <View flexShrink={0} data-button-loading="" aria-hidden>
       <Spinner px={iconSize} color={nativeIconColor as string} aria-hidden />
     </View>
-  ) : icon ? (
+  ) : glyph ? (
     <View flexShrink={0}>
       {isWeb ? (
-        normalizeButtonIcon(icon, iconSize)
+        normalizeButtonIcon(glyph, iconSize)
       ) : (
-        <NativeButtonIcon icon={icon} size={iconSize} color={nativeIconColor} />
+        <NativeButtonIcon icon={glyph} size={iconSize} color={nativeIconColor} />
       )}
     </View>
   ) : null;
-  const iconAfterElement = iconAfter ? (
+  const glyphAfter =
+    iconAfter && (barGlyph || inlineGlyph)
+      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight)
+      : iconAfter;
+  const iconAfterElement = glyphAfter ? (
     <View flexShrink={0}>
       {isWeb ? (
-        normalizeButtonIcon(iconAfter, iconSize)
+        normalizeButtonIcon(glyphAfter, iconSize)
       ) : (
-        <NativeButtonIcon icon={iconAfter} size={iconSize} color={nativeIconColor} />
+        <NativeButtonIcon icon={glyphAfter} size={iconSize} color={nativeIconColor} />
       )}
     </View>
   ) : null;
@@ -766,7 +899,13 @@ export function Button({
     : undefined;
   const isCircular = Boolean(circular);
   const circularTokenPx = sizeTokenPx(resolvedSize);
-  const visualPx = nested ? knobProps.nestedControl.px : recipe.height;
+  const visualPx = nested
+    ? knobProps.nestedControl.px
+    : inlineGlyph
+      ? iconSize
+      : iconButton
+        ? Math.max(recipe.height, iconSize)
+        : recipe.height;
   // Touch circular tokens below 44 need an explicit box floor (circular variant also
   // sets maxWidth/maxHeight to the token). hitSlop covers native/touch leftovers.
   // Nested circulars skip this — they paint nestedControl and restore press
@@ -836,6 +975,30 @@ export function Button({
   const restFill = selectedFill ? (outlined ? "$background" : "$backgroundPress") : tierPaint?.rest;
   // A plain button is ink on the bar: no shadow at rest (E-FLAT).
   const plainTier = tier === "plain";
+  // LC-176: hover and press light a soft plate on web; on native the glyph
+  // dims, as an iOS bar button does. The media plate deepens instead.
+  const glyphState = iconButton && !selectedFill;
+  const iconHover = glyphState
+    ? isWeb
+      ? hostScoped({ backgroundColor: "$backgroundHover" })
+      : { backgroundColor: "transparent" }
+    : mediaPlate
+      ? { backgroundColor: "$shadow5" }
+      : undefined;
+  const iconPress = glyphState
+    ? isWeb
+      ? hostScoped({ backgroundColor: "$backgroundPress" })
+      : { backgroundColor: "transparent", opacity: ICON_BUTTON_PRESS_OPACITY }
+    : mediaPlate
+      ? { backgroundColor: "$shadow5" }
+      : undefined;
+  // A square box, so an `edge` pull puts the glyph itself on the gutter.
+  // On glass the circle, not the glyph, sits on the margin.
+  const glyphEdgePull = GlassView
+    ? 0
+    : iconButton
+      ? -Math.max(0, (visualPx - iconSize) / 2)
+      : edgePull;
   const buttonElement = (
     <ButtonFrame
       // DG-ST-03: an explained disable is aria-disabled (focusable, press
@@ -850,8 +1013,10 @@ export function Button({
         : undefined)}
       borderWidth={resolvedBorderWidth}
       size={resolvedSize}
-      {...(chromeless || plainTier ? undefined : knobProps.elevationChrome)}
-      elevation={plainTier ? undefined : knobProps.elevation}
+      {...(chromeless || plainTier || mediaPlate || confirmPlate
+        ? undefined
+        : knobProps.elevationChrome)}
+      elevation={plainTier || confirmPlate ? undefined : knobProps.elevation}
       // The frame's `outlined` variant declares only a `true` branch, so a
       // literal `false` is not consumed and React receives it as a DOM
       // attribute ("Received `false` for a non-boolean attribute"). Every
@@ -877,10 +1042,30 @@ export function Button({
             minHeight: visualPx,
           }
         : undefined)}
-      {...(edge && chromeless && !selectedFill && !isCircular
+      {...(iconButton || mediaPlate || confirmPlate
+        ? { width: visualPx, minWidth: visualPx, paddingHorizontal: 0 }
+        : undefined)}
+      {...(inlineGlyph ? { marginInlineStart: "$2" as const } : undefined)}
+      {...(GlassView ? { borderRadius: 100000, overflow: "hidden" as const } : undefined)}
+      {...(confirmPlate ? { borderRadius: 100000 } : undefined)}
+      {...(mediaPlate
+        ? {
+            borderRadius: 100000,
+            backgroundColor: "$shadow4",
+            ...(isWeb
+              ? {
+                  style: {
+                    backdropFilter: "blur(16px) saturate(180%)",
+                    WebkitBackdropFilter: "blur(16px) saturate(180%)",
+                  },
+                }
+              : undefined),
+          }
+        : undefined)}
+      {...(edge && !inlineGlyph && chromeless && !selectedFill && !isCircular
         ? edge === "start"
-          ? { marginInlineStart: edgePull }
-          : { marginInlineEnd: edgePull }
+          ? { marginInlineStart: glyphEdgePull }
+          : { marginInlineEnd: glyphEdgePull }
         : undefined)}
       {...(restFill ? { backgroundColor: restFill } : undefined)}
       // Solid-intent sub-themes carry the on-fill foreground as `$color`
@@ -915,6 +1100,7 @@ export function Button({
         ...text.hoverKnobProps,
         // A selected fill, or the LC-153 tier's wash, beats the knob state fill.
         ...(selectedFill || tierPaint ? { backgroundColor: selectedHoverFill } : undefined),
+        ...iconHover,
       }}
       pressStyle={{
         backgroundColor: selectedPressFill,
@@ -923,6 +1109,7 @@ export function Button({
         ...text.pressKnobProps,
         // A selected fill, or the LC-153 tier's wash, beats the knob state fill.
         ...(selectedFill || tierPaint ? { backgroundColor: selectedPressFill } : undefined),
+        ...iconPress,
       }}
       focusStyle={{ outlineWidth: 0 }}
       // DG-A11Y-01 / LC-71: house keyboard ring (≥2px `$outlineColor`) on the
@@ -971,6 +1158,9 @@ export function Button({
           }
         : undefined)}
       {...(isCircular && !grouped ? radiusClassProps("R-IDENTITY", "circular Button") : undefined)}
+      {...(!isCircular && (GlassView || confirmPlate || mediaPlate)
+        ? radiusClassProps("R-IDENTITY", "icon button plate")
+        : undefined)}
       {...(explainedDisable
         ? {
             // No `title`: hover-only reveals are banned on disabled controls
@@ -981,11 +1171,11 @@ export function Button({
             // Hover/press keep the LC-40 washed chrome — an aria-disabled
             // control must not light up like a pressable one.
             hoverStyle: {
-              backgroundColor: outlined ? "transparent" : "$background",
+              backgroundColor: outlined || frameless ? "transparent" : "$background",
               ...disabledSurface,
             },
             pressStyle: {
-              backgroundColor: outlined ? "transparent" : "$background",
+              backgroundColor: outlined || frameless ? "transparent" : "$background",
               ...disabledSurface,
             },
             "data-mp-disabled-explained": "true",
@@ -1001,6 +1191,19 @@ export function Button({
         : undefined)}
       {...(resolvedRole ? { "data-mp-action-role": resolvedRole } : undefined)}
       {...(tier ? { "data-mp-tier": tier } : undefined)}
+      {...(iconButton
+        ? {
+            "data-mp-icon-button": GlassView
+              ? "glass"
+              : inlineGlyph
+                ? "inline"
+                : neutralGlyph
+                  ? "neutral"
+                  : "glyph",
+          }
+        : undefined)}
+      {...(mediaPlate ? { "data-mp-icon-button": "media" } : undefined)}
+      {...(confirmPlate ? { "data-mp-icon-button": "primary" } : undefined)}
       data-mp-button-height={String(
         nested
           ? visualPx
@@ -1013,17 +1216,28 @@ export function Button({
       data-size-token={knobProps.sizeToken}
       {...(selectedFill ? { "aria-pressed": true, "data-mp-selected": "true" } : undefined)}
     >
+      {GlassView ? (
+        <GlassView
+          glassEffectStyle="regular"
+          isInteractive
+          pointerEvents="none"
+          style={{ position: "absolute", top: 0, right: 0, bottom: 0, left: 0 }}
+        />
+      ) : null}
       {iconElement}
       {labelContent}
       {iconAfterElement}
     </ButtonFrame>
   );
 
-  const themedButton = activeThemeName ? (
+  const intentButton = activeThemeName ? (
     <Theme name={activeThemeName as ThemeName}>{buttonElement}</Theme>
   ) : (
     buttonElement
   );
+  // The media plate reads the same over any picture in either scheme: a dark
+  // material with a light glyph.
+  const themedButton = mediaPlate ? <Theme name="dark">{intentButton}</Theme> : intentButton;
 
   // DG-ST-03 explain affordance: visible reason adjacent to the control —
   // discoverable by pointer, touch, keyboard, and SR (aria-describedby)
@@ -1060,3 +1274,21 @@ export function Button({
 
 Button.Icon = TamaguiButton.Icon;
 Button.Text = TamaguiSizableText;
+
+export interface IconButtonProps extends Omit<
+  ButtonProps,
+  "children" | "icon" | "verb" | "noun" | "outlined" | "circular"
+> {
+  icon: NonNullable<ButtonProps["icon"]>;
+  /** The action's name, read by assistive tech: the button shows only its glyph. */
+  "aria-label": string;
+}
+
+/**
+ * LC-176 ICON-BUTTON: a toolbar, nav-bar, row or field-accessory action drawn
+ * as its glyph alone (HIG bar buttons, Material's standard icon button).
+ * `plate="media"` floats it over imagery on a material circle.
+ */
+export function IconButton(props: IconButtonProps) {
+  return <Button {...props} />;
+}

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -16,7 +16,9 @@ function savebar(root: ParentNode = document.body): HTMLElement | null {
 
 function barButton(label: string, root: ParentNode = document.body): HTMLElement {
   const buttons = Array.from(root.querySelectorAll('[role="button"], button'));
-  const match = buttons.find((b) => b.textContent?.includes(label));
+  const match = buttons.find(
+    (b) => b.textContent?.includes(label) || b.getAttribute("aria-label") === label,
+  );
   if (!match) throw new Error(`No button labelled "${label}"`);
   return match as HTMLElement;
 }

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -2,7 +2,6 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../Button";
 import { Checkbox } from "../fields/Checkbox";
 import { Input } from "../fields/Input";
 import { RadioGroup } from "../fields/RadioGroup";
@@ -10,6 +9,7 @@ import { Switch } from "../fields/Switch";
 import { Form } from "../Form";
 import { ContextualSaveBar } from "./index";
 import { SizableText } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const fields = (
   <YStack gap="$4" width="100%" maxWidth={640} padding="$4" minHeight={360}>
@@ -127,7 +127,7 @@ function SubmissionPathsFixture() {
         }}
       >
         <Input name="name" label="Service name" />
-        <Button action="submit">Submit</Button>
+        <ActionButton kind="submit" formAction="submit" />
       </Form>
     </YStack>
   );

package/src/ContextualSaveBar/index.tsx

@@ -3,7 +3,8 @@ import { useResolvedKnobs, warnCancelDisabled, type KnobProps } from "@multiplat
 import { Store, useStore } from "@tanstack/react-store";
 import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { AnimatePresence, Text, XStack, isWeb } from "tamagui";
-import { Button } from "../Button";
+import { Button, IconButton } from "../Button";
+import { standardActions } from "../standardActions";
 import { collectFormFieldErrors } from "../ErrorSummary";
 import { useFormContext } from "../Form";
 import { getFormSubmission } from "../Form/submissionController";
@@ -321,21 +322,17 @@ export function ContextualSaveBar({
               >
                 {t("Discard")}
               </Button>
-              <Button
-                theme="active"
-                outlined={knobProps.outlined}
-                actionRole="primary"
-                size="$4"
-                icon={snap.isSubmitting ? <Spinner size="small" /> : undefined}
+              <IconButton
+                plate="primary"
+                icon={snap.isSubmitting ? <Spinner size="small" /> : standardActions.save.icon}
+                aria-label={t("Save")}
                 disabled={snap.isSubmitting || undefined}
                 disabledReason={snap.isSubmitting ? t("Saving") : undefined}
                 data-mp-savebar-save=""
                 onPress={() => {
                   void handleSave();
                 }}
-              >
-                {t("Save")}
-              </Button>
+              />
             </XStack>
           </XStack>
         ) : null}

package/src/ControlGroup/ControlGroup.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { YStack } from "tamagui";
 import { Button } from "../Button";
 import { Input } from "../InputParts";
+import { ActionButton } from "@multiplatform.one/components";
 import { ControlGroup } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
 
@@ -130,11 +131,11 @@ export const Connected: Story = {
         <Button>Go</Button>
       </ControlGroup>
       <ControlGroup>
-        <Button>Search</Button>
+        <ActionButton kind="search" />
         <Input.Box>
           <Input.Area placeholder="query" flex={1} />
         </Input.Box>
-        <Button>Filter</Button>
+        <ActionButton kind="filter" />
       </ControlGroup>
     </YStack>
   ),

package/src/DescriptionList/index.tsx

@@ -290,7 +290,6 @@ function IdentifierValue({ text }: { text: string }) {
       <Button
         nested
         chromeless
-        circular
         flexShrink={0}
         icon={<CopyIcon />}
         aria-label={t("Copy to clipboard")}

package/src/ErrorSummary.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { ActionButton } from "@multiplatform.one/components";
 import { Button } from "./Button";
 import { ErrorSummary, collectFormFieldErrors } from "./ErrorSummary";
 import { FieldLayout } from "./fieldLayout";
@@ -168,7 +169,7 @@ export const FocusesTheFieldOnPress: Story = {
                 </InputParts>
               </FieldLayout>
             </FormSection>
-            <Button onPress={submit}>Submit</Button>
+            <ActionButton kind="submit" onPress={submit} />
           </YStack>
         </Form>
       );

package/src/FieldLayout.stories.tsx

@@ -10,6 +10,7 @@ import { Field, FieldLayout } from "./fieldLayout";
 import { Input } from "./fields/Input";
 import { Input as InputParts } from "./InputParts";
 import { Checkbox } from "./fields/Checkbox";
+import { ActionButton } from "@multiplatform.one/components";
 
 /**
  * FieldLayout wraps a CONTROL, so these stories cannot mount the house `Input`
@@ -196,7 +197,7 @@ export const FieldWrapper: Story = {
               )}
             </Field>
             <XStack gap="$2">
-              <Button action="submit">Submit</Button>
+              <ActionButton kind="submit" formAction="submit" />
               <Button onPress={() => form.reset()}>Reset</Button>
             </XStack>
           </YStack>
@@ -237,7 +238,7 @@ export const FieldRequiredValidator: Story = {
                 </FieldLayout>
               )}
             </Field>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );