rohanchkrabrty · Oct 19, 2026 · Oct 22, 2026 · Oct 22, 2026
diff --git a/apps/www/src/components/dataview-demo.tsx b/apps/www/src/components/dataview-demo.tsx
@@ -492,28 +492,28 @@ export function DataViewVirtualizedGroupingDemo() {
 // ---------------------------------------------------------------------------
 
 export function DataViewLoadingDemo() {
-  const [isLoading, setIsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
   return (
     <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <Flex gap={3} align='center'>
         <Button
           size='small'
           variant='outline'
           color='neutral'
-          onClick={() => setIsLoading(v => !v)}
+          onClick={() => setLoading(v => !v)}
         >
-          {isLoading ? 'Stop loading' : 'Show skeletons'}
+          {loading ? 'Stop loading' : 'Show skeletons'}
         </Button>
         <Text size='small' variant='secondary'>
-          Skeleton rows render while `isLoading` is true.
+          Skeleton rows render while `loading` is true.
         </Text>
       </Flex>
       <div style={{ height: 320 }}>
         <DataView
-          data={isLoading ? [] : people}
+          data={loading ? [] : people}
           fields={fields}
           defaultSort={defaultSort}
-          isLoading={isLoading}
+          loading={loading}
           loadingRowCount={4}
         >
           <DataView.Toolbar>
@@ -628,7 +628,7 @@ function SelectionBar() {
         size='large'
         color='neutral'
         leadingIcon={<Frame size={16} strokeWidth={1.5} />}
-        isDismissible
+        dismissible
         onDismiss={() => table.resetRowSelection()}
       >
         {selectedCount} selected

diff --git a/apps/www/src/components/demo/demo-playground.tsx b/apps/www/src/components/demo/demo-playground.tsx
@@ -109,8 +109,8 @@ export default function DemoPlayground({
       <Dialog open={openPlayground} onOpenChange={setOpenPlayground}>
         <Dialog.Content
           className={styles.playgroundDialog}
-          showCloseButton={false}
-          showNestedAnimation={false}
+          hideCloseButton
+          disableNestedAnimation
         >
           <Dialog.Header className={styles.playgroundHeader}>
             <DemoTitle className={styles.playgroundTitle} />

diff --git a/apps/www/src/content/docs/(overview)/upgrading.mdx b/apps/www/src/content/docs/(overview)/upgrading.mdx
@@ -7,6 +7,50 @@ One section per release, newest first, with only the changes that need action
 from you. The full record of every release, features and fixes included, is
 on [GitHub releases](https://github.com/raystack/apsara/releases).
 
+## Unreleased: boolean props use one naming rule
+
+A boolean prop that removes a part which shows by default is `hide<Part>`. A
+prop that turns off a behavior which is on by default is `disable<Behavior>`.
+Each flipped prop defaults to `false`, so a component looks and behaves the
+same when you do not pass it. TypeScript reports each old name.
+
+| Component | Before | After |
+|---|---|---|
+| `Dialog.Content`, `Drawer.Content` | `showCloseButton={false}` | `hideCloseButton` |
+| `Dialog.Content`, `AlertDialog.Content` | `showNestedAnimation={false}` | `disableNestedAnimation` |
+| `Editor` toolbar controls | `tooltip={false}` | `hideTooltip` |
+| `DatePicker`, `RangePicker` | `showCalendarIcon={false}` | `hideCalendarIcon` |
+| `CalendarPreview.Body` | `showIcon` | `showCalendarIcon` |
+| `DataView.List`, `DataView.Timeline` | `showGroupHeaders={false}` | `hideGroupHeaders` |
+| `DataView.Timeline` | `showGridlines={false}` | `hideGridlines` |
+| `DataView.Timeline` | `showCursorLine={false}` | `hideCursorLine` |
+| `Skeleton` | `enableAnimation={false}` | `disableAnimation` |
+| `Chip` | `isDismissible` | `dismissible` |
+| `DataView` | `isLoading` | `loading` |
+| `Calendar` | `loadingData` | `loading` |
+| `CopyButton` | `resetIcon={false}` | `resetTimeout={Infinity}` |
+
+```tsx
+// Before
+<Dialog.Content showCloseButton={false} showNestedAnimation={false} />
+<DataView isLoading={fetching} />
+<Chip isDismissible onDismiss={remove}>Label</Chip>
+
+// After
+<Dialog.Content hideCloseButton disableNestedAnimation />
+<DataView loading={fetching} />
+<Chip dismissible onDismiss={remove}>Label</Chip>
+```
+
+`useDataView().isLoading` keeps its name.
+
+### A loading `Button` is disabled
+
+`Button` with `loading` ignores clicks and sets `aria-disabled="true"`, as
+`IconButton` does. The button stays focusable, and it keeps its loading style.
+If your code let a user click a loading button, for example to cancel, render
+a separate cancel button.
+
 ## Unreleased: date filters compare whole days
 
 `DataView`, `DataTable` and `FilterChip` read and compare dates as calendar

diff --git a/apps/www/src/content/docs/components/alert-dialog/props.ts b/apps/www/src/content/docs/components/alert-dialog/props.ts
@@ -8,10 +8,10 @@ export interface AlertDialogProps {
 
 export interface AlertDialogContentProps {
   /**
-   * Toggle nested dialog animation (scaling and translation)
-   * @default true
+   * Turns off the scale and offset of a dialog that has a nested dialog open.
+   * @default false
    */
-  showNestedAnimation?: boolean;
+  disableNestedAnimation?: boolean;
 
   /** Overlay configuration including blur, className, and style */
   overlay?: {

diff --git a/apps/www/src/content/docs/components/button/index.mdx b/apps/www/src/content/docs/components/button/index.mdx
@@ -98,8 +98,9 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 - Uses the native `<button>` element so keyboard activation with Enter and
   Space works out of the box.
 - Disabled state is communicated via the native `disabled` attribute.
-- Loading state sets `aria-busy="true"` on the button so screen readers
-  announce the busy state. The internal spinner is rendered with
-  `aria-hidden="true"` to avoid double-announcing.
+- Loading state sets `aria-busy="true"` and `aria-disabled="true"` on the
+  button. The button stays focusable, so focus does not move while the action
+  runs. The internal spinner is rendered with `aria-hidden="true"` to avoid
+  double-announcing.
 - Respects motion preferences: button loader rotation is enabled only when
   `prefers-reduced-motion: no-preference`.
diff --git a/apps/www/src/content/docs/components/button/props.ts b/apps/www/src/content/docs/components/button/props.ts
@@ -25,7 +25,10 @@ export type ButtonProps = {
    */
   disabled?: boolean;
 
-  /** Shows a loading spinner inside the button */
+  /**
+   * Shows a spinner in place of the content and blocks clicks. The button stays focusable.
+   * @defaultValue false
+   */
   loading?: boolean;
 
   /** Optional text to display next to the loading spinner */

diff --git a/apps/www/src/content/docs/components/calendar-preview/demo.ts b/apps/www/src/content/docs/components/calendar-preview/demo.ts
@@ -177,7 +177,7 @@ export const periodsDemo = {
               defaultMonth={new Date(2026, 7, 1)}
               defaultScale="quarter"
             >
-              <CalendarPreview.Body showIcon />
+              <CalendarPreview.Body showCalendarIcon />
             </CalendarPreview>`
     },
     {
@@ -188,7 +188,7 @@ export const periodsDemo = {
             >
               <CalendarPreview.Trigger placeholder="Add start date" />
               <CalendarPreview.Content>
-                <CalendarPreview.Body showIcon />
+                <CalendarPreview.Body showCalendarIcon />
               </CalendarPreview.Content>
             </CalendarPreview>`
     },
@@ -200,19 +200,19 @@ export const periodsDemo = {
               defaultMonth={new Date(2026, 7, 1)}
               yearRange={{ from: 2025, to: 2027 }}
             >
-              <CalendarPreview.Body showIcon />
+              <CalendarPreview.Body showCalendarIcon />
             </CalendarPreview>`
     },
     {
       name: 'Month',
       code: `<CalendarPreview scales={['month', 'quarter', 'year']} defaultScale="month">
-              <CalendarPreview.Body showIcon />
+              <CalendarPreview.Body showCalendarIcon />
             </CalendarPreview>`
     },
     {
       name: 'Quarter',
       code: `<CalendarPreview scales="quarter" defaultMonth={new Date(2026, 7, 1)}>
-              <CalendarPreview.Body showIcon />
+              <CalendarPreview.Body showCalendarIcon />
             </CalendarPreview>`
     },
     {
@@ -232,7 +232,7 @@ export const periodsDemo = {
             placeholder="Add start date"
           />
           <CalendarPreview.Content>
-            <CalendarPreview.Body showIcon label="Start date" />
+            <CalendarPreview.Body showCalendarIcon label="Start date" />
           </CalendarPreview.Content>
         </CalendarPreview>
 
@@ -245,7 +245,7 @@ export const periodsDemo = {
             placeholder="Add end date"
           />
           <CalendarPreview.Content>
-            <CalendarPreview.Body showIcon label="End date" />
+            <CalendarPreview.Body showCalendarIcon label="End date" />
           </CalendarPreview.Content>
         </CalendarPreview>
       </Flex>
@@ -299,7 +299,7 @@ export const limitsDemo = {
               trailingValue
               minDate={new Date(2026, 6, 15)}
             >
-              <CalendarPreview.Body showIcon />
+              <CalendarPreview.Body showCalendarIcon />
             </CalendarPreview>`
     }
   ]

diff --git a/apps/www/src/content/docs/components/calendar-preview/index.mdx b/apps/www/src/content/docs/components/calendar-preview/index.mdx
@@ -415,7 +415,6 @@ The rest are renames:
 | `onSelect` | `onValueChange` |
 | `startMonth` / `endMonth` | `minDate` / `maxDate` |
 | `disabled` (matcher) | `isDateUnavailable` |
-| `loadingData` | `loading` |
 | `dateFormat` | `formatValue` |
 | `required` | `clearable` (inverted) |
 | `footer` prop | `<CalendarPreview.Footer>` part |

diff --git a/apps/www/src/content/docs/components/calendar-preview/props.ts b/apps/www/src/content/docs/components/calendar-preview/props.ts
@@ -282,10 +282,10 @@ export interface CalendarPreviewBodyProps {
   label?: ReactNode;
 
   /**
-   * Whether the field carries the calendar glyph.
+   * Shows the calendar icon in the date input.
    * @default false
    */
-  showIcon?: boolean;
+  showCalendarIcon?: boolean;
 }
 
 export interface CalendarPreviewScaleProps {

diff --git a/apps/www/src/content/docs/components/calendar/demo.ts b/apps/www/src/content/docs/components/calendar/demo.ts
@@ -35,7 +35,7 @@ export const calendarDemo = {
     },
     {
       name: 'With Loading',
-      code: `<Calendar loadingData={true} numberOfMonths={2} />`
+      code: `<Calendar loading numberOfMonths={2} />`
     },
     {
       name: 'With Dropdowns',
@@ -129,7 +129,7 @@ export const rangePickerDemo = {
     },
     {
       name: 'Without Calendar Icon',
-      code: `<RangePicker showCalendarIcon={false} />`
+      code: `<RangePicker hideCalendarIcon />`
     },
     {
       name: 'Custom Trigger',
@@ -182,7 +182,7 @@ export const datePickerDemo = {
     },
     {
       name: 'Without Calendar Icon',
-      code: `<DatePicker showCalendarIcon={false} slotProps={{ input: { size: "medium" } }} />`
+      code: `<DatePicker hideCalendarIcon slotProps={{ input: { size: "medium" } }} />`
     },
     {
       name: 'With Field',

diff --git a/apps/www/src/content/docs/components/calendar/props.ts b/apps/www/src/content/docs/components/calendar/props.ts
@@ -77,10 +77,10 @@ export interface CalendarProps {
     | ((date: Date) => boolean);
 
   /**
-   * Boolean to show loading state.
-   * @example loadingData={true}
+   * Shows a skeleton over the days and disables navigation.
+   * @defaultValue false
    */
-  loadingData?: boolean;
+  loading?: boolean;
 
   /**
    * Enable tooltips on dates that have a matching `tooltipMessages` entry.
@@ -193,10 +193,10 @@ export interface RangePickerProps {
     | ((props: { startDate: string; endDate: string }) => React.ReactNode);
 
   /**
-   * Boolean to show/hide calendar icon
-   * @defaultValue true
+   * Hides the calendar icon in the input.
+   * @defaultValue false
    */
-  showCalendarIcon?: boolean;
+  hideCalendarIcon?: boolean;
 
   /** Optional footer content for the calendar popover */
   footer?: React.ReactNode;
@@ -279,10 +279,10 @@ export interface DatePickerProps {
     | ((props: { selectedDate: string }) => React.ReactNode);
 
   /**
-   * Boolean to show/hide calendar icon
-   * @defaultValue true
+   * Hides the calendar icon in the input.
+   * @defaultValue false
    */
-  showCalendarIcon?: boolean;
+  hideCalendarIcon?: boolean;
 
   /**
    * IANA timezone name (e.g., "America/New_York"), "UTC", or UTC offset (e.g., "+02:00").

diff --git a/apps/www/src/content/docs/components/chip/demo.ts b/apps/www/src/content/docs/components/chip/demo.ts
@@ -27,7 +27,7 @@ export const playground = {
       options: ['neutral', 'accent', 'danger', 'success', 'warning'],
       defaultValue: 'neutral'
     },
-    isDismissible: {
+    dismissible: {
       type: 'checkbox',
       defaultValue: false
     },
@@ -84,9 +84,9 @@ export const dismissableDemo = {
   type: 'code',
   code: `
   <Flex gap={9}>
-    <Chip isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
-    <Chip variant="outline" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
-    <Chip variant="filled" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
+    <Chip dismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
+    <Chip variant="outline" color="accent" dismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
+    <Chip variant="filled" color="accent" dismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
   </Flex>`
 };
 

diff --git a/apps/www/src/content/docs/components/chip/index.mdx b/apps/www/src/content/docs/components/chip/index.mdx
@@ -58,7 +58,7 @@ Chips can include leading and trailing icons to provide additional context or ac
 
 ### Dismissible
 
-Chips can be made dismissible by adding the isDismissible prop and an onDismiss handler.
+Chips can be made dismissible by adding the `dismissible` prop and an `onDismiss` handler.
 
 <Demo data={dismissableDemo} />
 
@@ -79,8 +79,8 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `chip` | The root element (`<button>` when interactive, `<span>` otherwise) |
 | `chip-leading-icon` | Wrapper around `leadingIcon` (when set) |
 | `chip-trailing-icon` | Wrapper around `trailingIcon` (when set and not dismissible) |
-| `chip-dismiss` | The dismiss button (when `isDismissible`) |
-| `chip-dismiss-icon` | The dismiss icon (when `isDismissible`) |
+| `chip-dismiss` | The dismiss button (when `dismissible`) |
+| `chip-dismiss-icon` | The dismiss icon (when `dismissible`) |
 
 ## Accessibility
 

diff --git a/apps/www/src/content/docs/components/chip/props.ts b/apps/www/src/content/docs/components/chip/props.ts
@@ -26,7 +26,7 @@ export interface ChipProps {
   /**
    * Boolean to show a dismiss button (replaces trailingIcon)
    */
-  isDismissible?: boolean;
+  dismissible?: boolean;
 
   /** Callback function when dismiss button is clicked */
   onDismiss?: () => void;

diff --git a/apps/www/src/content/docs/components/copy-button/index.mdx b/apps/www/src/content/docs/components/copy-button/index.mdx
@@ -10,7 +10,7 @@ import { playground, sizesDemo, stateDemo } from "./demo.ts";
 
 ## Overview
 
-`CopyButton` is an [IconButton](/docs/components/icon-button) wired to the clipboard: pass the `text` to copy and it handles the click, swaps the copy icon for a check, and announces "Copied" to screen readers. The check icon reverts after `resetTimeout` (default 1000ms); set `resetIcon={false}` to keep it. Drop it next to code snippets, API keys, and IDs. If you need copy behavior with your own UI, use the `useCopyToClipboard` hook from `@raystack/apsara/hooks` instead.
+`CopyButton` is an [IconButton](/docs/components/icon-button) wired to the clipboard: pass the `text` to copy and it handles the click, swaps the copy icon for a check, and announces "Copied" to screen readers. The check icon reverts after `resetTimeout` (default 1000ms). Set `resetTimeout={Infinity}` to keep it. Drop it next to code snippets, API keys, and IDs. If you need copy behavior with your own UI, use the `useCopyToClipboard` hook from `@raystack/apsara/hooks` instead.
 
 ## Anatomy
 

diff --git a/apps/www/src/content/docs/components/copy-button/props.ts b/apps/www/src/content/docs/components/copy-button/props.ts
@@ -5,14 +5,8 @@ export interface CopyButtonProps {
   text: string;
 
   /**
-   * Time in milliseconds before reverting to the default icon.
+   * Milliseconds before the check icon changes back. `Infinity` keeps it.
    * @default 1000
    */
   resetTimeout?: number;
-
-  /**
-   * Whether to reset to the default icon after copying.
-   * @default true
-   */
-  resetIcon?: boolean;
 }
diff --git a/apps/www/src/content/docs/components/dialog/index.mdx b/apps/www/src/content/docs/components/dialog/index.mdx
@@ -136,7 +136,7 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `dialog-body` | The `Dialog.Body` container |
 | `dialog-description` | The `Dialog.Description` element |
 | `dialog-footer` | The `Dialog.Footer` row |
-| `dialog-close` | The built-in close button (when `showCloseButton`) |
+| `dialog-close` | The built-in close button (unless `hideCloseButton`) |
 
 ## Accessibility