@lotics/ui 5.7.0 → 5.8.0

package/src/change_review.tsx

@@ -173,8 +173,8 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
                   <View key={props.getKey(item, i)} style={styles.itemCard}>
                     {props.renderItem(item, i)}
                     <View style={styles.itemActions}>
-                      <Button title={props.rejectLabel ?? "Drop"} color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
-                      <Button title={props.acceptLabel ?? "Keep"} color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
+                      <Button title={props.rejectLabel ?? "Drop"} color="muted" onPress={() => props.onRejectItem?.(i)} />
+                      <Button title={props.acceptLabel ?? "Keep"} color="secondary" onPress={() => props.onAcceptItem?.(i)} />
                     </View>
                   </View>
                 );
@@ -193,7 +193,7 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
                     )}
                   </View>
                   {props.onUndoItem ? (
-                    <Button title={L.undo} color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
+                    <Button title={L.undo} color="muted" onPress={() => props.onUndoItem?.(i)} />
                   ) : null}
                 </View>
               );
@@ -243,14 +243,13 @@ export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
     });
   return (
     <View style={styles.actionsRow}>
-      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" shape="rounded" onPress={acceptAll} /> : null}
+      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" onPress={acceptAll} /> : null}
       <View style={{ flex: 1 }} />
-      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
+      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" onPress={props.onDiscard} /> : null}
       {props.onApply ? (
         <Button
           title={props.applyLabel ?? (perItem ? "Apply kept" : "Apply")}
           color="primary"
-          shape="rounded"
           disabled={perItem && keptCount === 0}
           onPress={props.onApply}
         />

package/src/{pill_button.tsx → chip.tsx}

@@ -1,10 +1,10 @@
 import { Ref } from "react";
 import { IconButton } from "./icon_button";
 import { PressableHighlight } from "./pressable_highlight";
-import { pillSurfaceStyle } from "./control_surface";
+import { chipSurfaceStyle } from "./control_surface";
 import { StyleSheet, View } from "react-native";
 
-interface PillButtonProps {
+interface ChipProps {
   testID?: string;
   children: React.ReactNode;
   onPress?: () => void;
@@ -13,7 +13,7 @@ interface PillButtonProps {
   ref?: Ref<View>;
 }
 
-export function PillButton(props: PillButtonProps) {
+export function Chip(props: ChipProps) {
   const { testID, children, onPress, onDismiss, dismissTooltip, ref } = props;
 
   return (
@@ -22,12 +22,12 @@ export function PillButton(props: PillButtonProps) {
         <PressableHighlight
           testID={testID}
           onPress={onPress}
-          style={(state) => [pillSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
+          style={(state) => [chipSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
         >
           {children}
         </PressableHighlight>
       ) : (
-        <View style={[pillSurfaceStyle({}), styles.pillLayout, onDismiss && styles.pillWithDismiss]}>{children}</View>
+        <View style={[chipSurfaceStyle({}), styles.pillLayout, onDismiss && styles.pillWithDismiss]}>{children}</View>
       )}
       {onDismiss && (
         <View style={styles.dismissButton}>
@@ -45,8 +45,8 @@ export function PillButton(props: PillButtonProps) {
 }
 
 const styles = StyleSheet.create({
-  // Surface (height/border/radius/white + hover) comes from pillSurfaceStyle;
-  // PillButton owns only its row layout.
+  // Surface (height/border/radius/white + hover) comes from chipSurfaceStyle;
+  // Chip owns only its row layout.
   pillLayout: {
     flexDirection: "row",
     alignItems: "center",

package/src/chip_group.tsx

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
-import { pillSurfaceStyle } from "./control_surface";
+import { chipSurfaceStyle } from "./control_surface";
 
 // One-of-N chips: every option visible, one tap to switch, the row wraps on
 // narrow widths. Quiet zinc styling — bordered white at rest, dark fill when
@@ -55,7 +55,7 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
             // The shared pill-surface contract (height/border/radius/white +
             // hover/press wash + the selected box-shadow ring); the chip only
             // adds its horizontal padding.
-            style={(state) => [pillSurfaceStyle(state, { selected: active }), { paddingHorizontal: 14 }]}
+            style={(state) => [chipSurfaceStyle(state, { selected: active }), { paddingHorizontal: 14 }]}
           >
             <Text size="sm" weight={active ? "semibold" : "medium"} color={active ? "default" : "muted"}>
               {option.label}

package/src/column_filter.tsx

@@ -3,7 +3,7 @@ import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 import { NumberInput } from "./number_input";
 import { PickerMenu } from "./picker_menu";
-import { FilterPill } from "./filter_pill";
+import { FilterChip } from "./filter_chip";
 import type { PickerOption } from "./picker";
 
 /** A column the picker can filter on. `type` selects the control + operators. */
@@ -97,7 +97,7 @@ export interface ColumnFilterProps {
 }
 
 /**
- * A toolbar-style filter pill: the same `PillButton` the table toolbar uses, so
+ * A toolbar-style filter pill: the same `Chip` the table toolbar uses, so
  * a picker's filters read identically. Inactive → "Label ⌄"; active →
  * "Label: summary" with an X to clear. Pressing the pill opens a type-aware
  * editor (text contains / number range / multi-select). Controlled — the
@@ -109,7 +109,7 @@ export function ColumnFilter(props: ColumnFilterProps) {
   const active = isColumnFilterActive(value);
 
   return (
-    <FilterPill
+    <FilterChip
       label={column.label}
       summary={active ? columnFilterSummary(column, value) : undefined}
       onClear={() => onChange(undefined)}
@@ -150,7 +150,7 @@ export function ColumnFilter(props: ColumnFilterProps) {
             onValueChange={(selected) => onChange({ kind: "select", selected })}
           />
         )}
-    </FilterPill>
+    </FilterChip>
   );
 }
 

package/src/combobox.tsx

@@ -9,7 +9,7 @@ import {
 } from "react-native";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING, inputPillStyle } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -70,11 +70,6 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
    *  picker, not a free-text search box. Opt IN to the search-box look explicitly
    *  with `icon="search"` (leading glyph, no chevron). Multi-select shows neither. */
   icon?: IconName;
-  /** Render the input on the white toolbar-pill surface (rounded-full, white
-   *  fill, zinc-300 border) — the same surface SearchInput/ChipGroup/FilterPill
-   *  wear — so a combobox used as a toolbar filter reads as a view-control on the
-   *  zinc-50 canvas, not a form field. Single-select only. */
-  pill?: boolean;
   placeholder?: string;
   recentsLabel?: string;
   emptyText?: string;
@@ -128,7 +123,6 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     loading = false,
     searchDebounceMs = 200,
     icon,
-    pill = false,
     placeholder,
     recentsLabel = "Recent",
     emptyText = "No results",
@@ -346,7 +340,6 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           autoCorrect={false}
           style={[
             multi ? styles.multiInput : showChevron ? styles.selectInput : undefined,
-            !multi && pill ? inputPillStyle : undefined,
             // Single-select wears the open ring on the input (which holds the
             // border); multi wears it on the wrapper above (the input is borderless).
             // Gate on `showList`, not `open`: an empty query with no options has
@@ -471,7 +464,7 @@ const styles = StyleSheet.create({
     minHeight: 40,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   multiInput: {
     flexGrow: 1,

package/src/composer.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode, type Ref, useCallback, useEffect, useState } from "react";
 import { View, TextInput as RNTextInput, ScrollView, StyleSheet, type TextInputProps } from "react-native";
-import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { colors } from "./colors";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
@@ -156,10 +156,11 @@ export function Composer(props: ComposerProps) {
 
   const sendButton =
     disabled && onStop ? (
-      <Button onPress={onStop} color="primary" icon="square" tooltip={stopLabel} accessibilityLabel={stopLabel} />
+      <IconButton onPress={onStop} size="lg" color="primary" icon="square" tooltip={stopLabel} accessibilityLabel={stopLabel} />
     ) : (
-      <Button
+      <IconButton
         onPress={handleSend}
+        size="lg"
         color="primary"
         disabled={disabled || effectiveSendDisabled}
         icon="arrow-up"

package/src/control_surface.ts

@@ -1,10 +1,21 @@
-import { type TextStyle, type ViewStyle } from "react-native";
+import { type ViewStyle } from "react-native";
 import { colors } from "./colors";
 
 /** The system control height — every band control (chips, pills, search,
  *  buttons) aligns to it so a toolbar row reads as one band. */
 export const CONTROL_HEIGHT = 40;
 
+/** The system control radius — every interactive control surface (Button, the
+ *  inputs/selects/pickers, SearchInput, MenuButton, Tabs, the SegmentedControl
+ *  track, and ChipGroup/FilterChip/Chip via the surfaces below) wears it,
+ *  so the whole control vocabulary reads as one family. Containers are
+ *  deliberately larger (Card 16, the review card 12); a nested element inside a
+ *  padded control (a segmented thumb, a combobox chip) takes `CONTROL_RADIUS −
+ *  padding` so its corner stays CONCENTRIC with the parent's — set it equal and
+ *  the inner corner bulges past the outer curve. Round-by-function controls
+ *  (avatars, dots, switches, sliders, progress, icon buttons) stay full. */
+export const CONTROL_RADIUS = 10;
+
 /** The active/open edge for an interactive control — a 2px zinc-900 ring flush
  *  against the box (offset 0), MIRRORING the keyboard `:focus-visible` outline
  *  (index.css). A mouse-opened popover trigger (Picker / Combobox / InlineSelect /
@@ -13,17 +24,6 @@ export const CONTROL_HEIGHT = 40;
  *  beside the kit's focus outline and selected-pill ring. */
 export const ACTIVE_RING = `0 0 0 2px ${colors.zinc[900]}`;
 
-/** THE white toolbar-input surface — a rounded-full white pill with a one-step-up
- *  zinc-300 border. A search/select control (SearchInput, and Combobox via `pill`)
- *  wears it so it reads as a view-control beside ChipGroup/FilterPill on the
- *  zinc-50 canvas (where the fill pops), not as a form field that vanishes into a
- *  white card. One definition so the two controls never drift. */
-export const inputPillStyle: TextStyle = {
-  borderRadius: 999,
-  backgroundColor: colors.white,
-  borderColor: colors.zinc[300],
-};
-
 /** THE review-card surface — the bordered white card every "AI proposes, you
  *  decide" surface wears (`ReviewCard`, and the whole-set `ChangeReview`), so the
  *  review family reads as ONE contract instead of look-alikes drifting apart. One
@@ -41,7 +41,7 @@ export const reviewResolvedStyle: ViewStyle = { backgroundColor: colors.zinc[50]
 
 /**
  * THE pill-surface contract — the single definition of the bordered, white,
- * rounded interactive surface shared by `ChipGroup` chips and `PillButton` (and
+ * rounded interactive surface shared by `ChipGroup` chips and `Chip` (and
  * anything composed on them). Returns the style for the CURRENT pressable state,
  * so the hover (white → zinc-100) and press (zinc-200) washes live in ONE place
  * instead of drifting per control — and any control built on it hovers without
@@ -49,7 +49,7 @@ export const reviewResolvedStyle: ViewStyle = { backgroundColor: colors.zinc[50]
  * crisp 2px dark edge, no layout shift). Each control adds its own padding/layout
  * on top.
  */
-export function pillSurfaceStyle(
+export function chipSurfaceStyle(
   state: { hovered?: boolean; pressed?: boolean },
   opts?: { selected?: boolean },
 ): ViewStyle {
@@ -57,7 +57,7 @@ export function pillSurfaceStyle(
   return {
     height: CONTROL_HEIGHT,
     justifyContent: "center",
-    borderRadius: 999,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: selected ? colors.zinc[900] : colors.border,
     backgroundColor: state.pressed ? colors.zinc[200] : state.hovered ? colors.zinc[100] : colors.white,

package/src/date_field.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { DateSegments } from "./date_segments_field";
 import { SegmentLabels, dateSegmentsConfig } from "./date_segments";
@@ -144,7 +145,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 8,
     gap: 4,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,

package/src/date_filter.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { MenuButton } from "./menu_button";
 import { Calendar, CalendarRangeValue, CalendarRef } from "./date_calendar";
 import { TimeField } from "./time_field";
@@ -336,7 +337,7 @@ export function DateFilter(props: DateFilterProps) {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.white,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     gap: 16,
   },
   presetsSidebar: {

package/src/date_range_filter_field.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon } from "./icon";
 import { Button } from "./button";
 import { PressableHighlight } from "./pressable_highlight";
@@ -130,7 +131,7 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
             paddingHorizontal: 12,
             borderWidth: 1,
             borderColor: colors.zinc[300],
-            borderRadius: 8,
+            borderRadius: CONTROL_RADIUS,
             backgroundColor: colors.white,
           }}
         >

package/src/dialog.tsx

@@ -3,7 +3,7 @@ import { Animated, Modal, StyleSheet, View, ScrollView } from "react-native";
 import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { PortalHost } from "@lotics/ui/portal";
 import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
+import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { BackButton } from "@lotics/ui/back_button";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
@@ -163,7 +163,7 @@ export function Dialog(props: DialogProps) {
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
                       <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
-                        <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
+                        <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={handleClose} />
                       </View>
                       <View style={styles.container}>{children}</View>
                     </View>

package/src/discrepancy.tsx

@@ -88,7 +88,7 @@ export function Discrepancy(props: DiscrepancyProps) {
 
           {onFlag ? (
             <View style={styles.footer}>
-              <Button title="Flag for review" color="muted" shape="rounded" onPress={onFlag} />
+              <Button title="Flag for review" color="muted" onPress={onFlag} />
             </View>
           ) : null}
         </>

package/src/drawer.tsx

@@ -3,7 +3,6 @@ import { Modal, Pressable, StyleSheet, View } from "react-native";
 import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { PortalHost } from "@lotics/ui/portal";
 import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
 import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
@@ -112,7 +111,7 @@ export function Drawer(props: DrawerProps) {
                   />
                 </View>
               ) : null}
-              <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
+              <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={handleClose} />
             </View>
             <View testID={testID} style={styles.body}>
               {children}

package/src/{filter_pill.tsx → filter_chip.tsx}

@@ -4,11 +4,11 @@ import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { LinkButton } from "./link_button";
-import { PillButton } from "./pill_button";
+import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
 
-export interface FilterPillProps {
+export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
    *  active ("Owner: Maria, James"). */
   label: string;
@@ -22,7 +22,7 @@ export interface FilterPillProps {
   /** Label for the clear affordances (pass a translated string). */
   clearLabel?: string;
   /** The editor revealed on press — a premium primitive (`RangeSlider`,
-   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterPill` owns
+   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterChip` owns
    *  the pill + popover chrome; the consumer owns the value and applies it.
    *  Pass a render function to receive `close` — the one editor that closes on
    *  action is single-select (`<PickerMenu>` → close on pick); range/counter/
@@ -39,7 +39,7 @@ export interface FilterPillProps {
 }
 
 /**
- * A short summary of a multi-select for a `FilterPill` preview — "Maria, James"
+ * A short summary of a multi-select for a `FilterChip` preview — "Maria, James"
  * up to `max` labels, else "N selected", and `undefined` when nothing is
  * chosen. The select sibling of `rangeSummary`.
  */
@@ -59,7 +59,7 @@ export function selectSummary(
  * filter dimension, the sibling of `ChipGroup` (which lays ONE hot dimension's
  * options out inline). Many dimensions stay scannable because each collapses to
  * a single pill: inactive reads "Label ⌄", active reads "Label: summary" with an
- * × to clear. `FilterPill` bakes the consistent chrome — the preview pill, a
+ * × to clear. `FilterChip` bakes the consistent chrome — the preview pill, a
  * padded popover body for the composed editor, and a Clear footer when active —
  * so every filter looks and behaves the same. Drop a premium primitive inside
  * (`RangeSlider`, `Counter`, `PickerMenu` multi). With `footer` (+ controlled
@@ -67,7 +67,7 @@ export function selectSummary(
  * setting gate with Cancel/Save — keeping it on the one pill surface. The table
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
-export function FilterPill(props: FilterPillProps) {
+export function FilterChip(props: FilterChipProps) {
   const { label, summary, onClear, clearLabel = "Clear", children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
   const active = summary != null && summary.length > 0;
   // The clear × / Clear footer only when there's a clearable selection AND no
@@ -87,12 +87,12 @@ export function FilterPill(props: FilterPillProps) {
   return (
     <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <PillButton onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
+        <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
           <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
             {active ? `${label}: ${summary}` : label}
           </Text>
           {!showClear ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
-        </PillButton>
+        </Chip>
       </PopoverTrigger>
       <PopoverContent style={styles.body} disableBodyScroll>
         {typeof children === "function" ? children({ close: () => setOpen(false) }) : children}

package/src/finding.tsx

@@ -81,7 +81,7 @@ export function Finding(props: FindingProps) {
       ) : null}
       {props.action ? (
         <View style={styles.actionRow}>
-          <Button title={props.action.label} color="secondary" shape="rounded" onPress={props.action.onPress} />
+          <Button title={props.action.label} color="secondary" onPress={props.action.onPress} />
         </View>
       ) : null}
     </View>

package/src/gantt/gantt_view.tsx

@@ -163,8 +163,8 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: colors.white },
   toolbar: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 14, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.border },
-  zoomSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 8, padding: 2 },
-  zoomBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 6 },
+  zoomSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 10, padding: 2 },
+  zoomBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 8 },
   zoomBtnActive: { backgroundColor: colors.white },
   headerCell: { borderBottomWidth: 1, borderBottomColor: colors.border },
   labelRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] },

package/src/icon_button.tsx

@@ -1,7 +1,9 @@
-import { GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { ActivityIndicator, GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Icon, IconName } from "./icon";
 import { colors } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
+import { type ButtonColor } from "./button";
+import { getButtonIconColor } from "./button_colors";
 import { Ref, useCallback } from "react";
 import { TooltipSide } from "./tooltip";
 
@@ -9,16 +11,23 @@ interface IconButtonBase {
   ref?: Ref<View>;
   testID?: string;
   icon: IconName;
-  color?: "none" | "primary" | "secondary" | "white";
-  /** `md` (28px, 18px glyph) for toolbars; `sm` (24px, 14px glyph) for
-   * inline affordances sitting next to body/sm text — e.g. the ⓘ in a
-   * CardHeader. Both keep a 40px touch target via hitSlop. */
-  size?: "md" | "sm";
+  /** Matches `Button`'s palette so an icon-only action migrates 1:1 — a filled
+   *  disc for primary/secondary/danger, a ghost for muted/danger-secondary/none. */
+  color?: ButtonColor | "none" | "white";
+  /** `lg` (40px, 20px glyph) for a circular primary action at the system control
+   * height — a composer send, a drawer/popover back or close; `md` (28px, 18px
+   * glyph) for toolbars; `sm` (24px, 14px glyph) for inline affordances next to
+   * body/sm text (e.g. the ⓘ in a CardHeader). md/sm keep a 40px touch target via
+   * hitSlop; `lg` is already 40. */
+  size?: "lg" | "md" | "sm";
   iconColor?: string;
   tooltipSide?: TooltipSide;
   onPress?: (event: GestureResponderEvent) => void;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
+  /** Show a spinner in place of the icon (and block press) — for an icon action
+   *  that triggers async work, e.g. a delete. */
+  loading?: boolean;
 }
 
 /**
@@ -43,6 +52,7 @@ export function IconButton(props: IconButtonProps) {
     tooltipSide,
     accessibilityLabel,
     disabled,
+    loading,
     style,
   } = props;
 
@@ -53,6 +63,11 @@ export function IconButton(props: IconButtonProps) {
     [onPress],
   );
 
+  const disabledOrLoading = disabled || loading;
+  const tint =
+    iconColor ??
+    (color === "none" ? colors.zinc[700] : color === "white" ? colors.white : getButtonIconColor(color));
+
   return (
     <PressableHighlight
       ref={ref}
@@ -61,18 +76,18 @@ export function IconButton(props: IconButtonProps) {
       tooltipSide={tooltipSide}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel ?? tooltip}
-      style={[styles.button, styles[size], styles[color], disabled && styles.disabled, style]}
+      style={[styles.button, styles[size], styles[color], disabledOrLoading && styles.disabled, style]}
       onPress={handlePress}
-      disabled={disabled}
+      disabled={disabledOrLoading}
       // 40px touch target regardless of visual size (28 + 2×6 / 24 + 2×8)
       // without shifting surrounding layouts.
-      hitSlop={size === "sm" ? 8 : 6}
+      hitSlop={size === "lg" ? 0 : size === "sm" ? 8 : 6}
     >
-      <Icon
-        size={size === "sm" ? 14 : 18}
-        name={icon}
-        color={iconColor || (color === "white" || color === "primary" ? colors.white : colors.zinc[700])}
-      />
+      {loading ? (
+        <ActivityIndicator size="small" color={tint} />
+      ) : (
+        <Icon size={size === "sm" ? 14 : size === "lg" ? 20 : 18} name={icon} color={tint} />
+      )}
     </PressableHighlight>
   );
 }
@@ -85,6 +100,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderRadius: 999,
   },
+  lg: {
+    width: 40,
+    height: 40,
+  },
   md: {
     width: 28,
     height: 28,
@@ -103,5 +122,10 @@ const styles = StyleSheet.create({
   secondary: {
     backgroundColor: colors.zinc[100],
   },
+  danger: {
+    backgroundColor: colors.red[100],
+  },
+  muted: {},
+  "danger-secondary": {},
   white: {},
 });

package/src/inline_edit.tsx

@@ -5,7 +5,7 @@ import { IconButton } from "./icon_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PressableHighlight } from "./pressable_highlight";
 import { colors } from "./colors";
-import { ACTIVE_RING } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
@@ -221,7 +221,7 @@ const viewTextStyle = [getInputTextStyle(), { flex: 1, fontFamily: fontFamilyReg
 const styles = StyleSheet.create({
   view: {
     minHeight: INLINE_CONTROL_HEIGHT,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: "transparent",
     paddingHorizontal: 8,

package/src/link_button.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from "react-native";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface LinkButtonProps {
   title: string;
@@ -44,7 +45,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 8,
     marginHorizontal: -8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     alignSelf: "flex-start",
   },
 });

package/src/menu_button.tsx

@@ -2,6 +2,7 @@ import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 export interface MenuButtonProps {
@@ -126,7 +127,7 @@ const styles = StyleSheet.create({
     gap: 8,
     height: 40,
     paddingHorizontal: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   textContainer: {
     flex: 1,

package/src/menu_list_item.tsx

@@ -2,6 +2,7 @@ import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import type { TextColor } from "./text_utils";
@@ -111,7 +112,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingHorizontal: 8,
     paddingVertical: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   textContainer: {
     flex: 1,