chore: add docs for actionbutton pending (#8912)

Author: snowystinger

packages/dev/s2-docs/pages/s2/ActionBar.mdx

@@ -25,7 +25,7 @@ let rows = [
 
 function Example(props) {
   return (
-    <TableView 
+    <TableView
       aria-label="Table with action bar"
       selectionMode="multiple"
       defaultSelectedKeys={[2]}

packages/dev/s2-docs/pages/s2/ActionButton.mdx

@@ -11,7 +11,7 @@ import docs from 'docs:@react-spectrum/s2';
 <VisualExample
   component={ActionButton}
   docs={docs.exports.ActionButton}
-  props={['children', 'size', 'staticColor', 'isQuiet', 'isDisabled']}
+  props={['children', 'size', 'staticColor', 'isQuiet', 'isDisabled', 'isPending']}
   initialProps={{children: 'Action'}}
   slots={{icon: true, avatar: true, badge: true}}
   importSource="@react-spectrum/s2"
@@ -39,6 +39,36 @@ function Example() {
 }
 ```
 
+## Pending
+
+Use the `isPending` prop to display a pending state. Pending buttons remain focusable, but are otherwise disabled. After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon.
+
+```tsx render
+"use client";
+import {ActionButton} from '@react-spectrum/s2';
+import {useState} from 'react';
+
+function PendingButton() {
+  let [isPending, setPending] = useState(false);
+
+  return (
+    <ActionButton
+      variant="primary"
+      ///- begin highlight -///
+      isPending={isPending}
+      ///- end highlight -///
+      onPress={() => {
+        setPending(true);
+        setTimeout(() => {
+          setPending(false);
+        }, 5000);
+      }}>
+      Save
+    </ActionButton>
+  );
+}
+```
+
 ## API
 
 ```tsx links={{ActionButton: '#actionbutton', Avatar: 'Avatar.html'}}