docs(astro): Update unstyled components custom usage (#1556)

Co-authored-by: Alexis Aguilar <[email protected]>
clerk · Sep 26, 2024 · 8269523 · 8269523
1 parent 9f3c593
commit 8269523
Show file tree

Hide file tree

Showing 3 changed files with 259 additions and 338 deletions.
diff --git a/docs/components/unstyled/sign-in-button.mdx b/docs/components/unstyled/sign-in-button.mdx
@@ -5,9 +5,16 @@ description: The <SignInButton> component is a button that links to the sign-in
 
 The `<SignInButton>` component is a button that links to the sign-in page or displays the sign-in modal.
 
-## `<SignInButton>` properties
+## Properties
 
 <Properties>
+  - `asChild?`
+  - `boolean`
+
+  **For Astro only:** If `true`, the `<SignInButton>` component will render its children as a child of the component.
+
+  ---
+
   - `forceRedirectUrl?`
   - `string`
 
@@ -49,112 +56,110 @@ The `<SignInButton>` component is a button that links to the sign-in page or dis
   Children you want to wrap the `<SignInButton>` in.
 </Properties>
 
-## How to use the `<SignInButton>` component
+## Usage
 
 ### Basic usage
 
-<CodeBlockTabs type="framework" options={["Next.js", "React", "Remix", "Astro"]}>
-  ```jsx {{ filename: 'pages/index.js' }}
-  import { SignInButton } from '@clerk/nextjs'
-
-  export default function Home() {
-    return (
-      <div>
-        <SignInButton />
-      </div>
-    )
-  }
-  ```
-
-  ```jsx {{ filename: 'example.js' }}
-  import { SignInButton } from '@clerk/clerk-react'
-
-  export default function Example() {
-    return (
-      <div>
-        <SignInButton />
-      </div>
-    )
-  }
-  ```
-
-  ```jsx {{ filename: 'pages/index.js' }}
-  import { SignInButton } from '@clerk/remix'
-
-  export default function Home() {
-    return (
-      <div>
-        <SignInButton />
-      </div>
-    )
-  }
-  ```
-
-  ```astro {{ filename: 'pages/index.astro' }}
-  ---
-  import { SignInButton } from '@clerk/astro/components'
-  ---
+<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+  <Tab>
+    ```jsx {{ filename: 'pages/index.js' }}
+    import { SignInButton } from '@clerk/nextjs'
+
+    export default function Home() {
+      return <SignInButton />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```jsx {{ filename: 'example.js' }}
+    import { SignInButton } from '@clerk/clerk-react'
+
+    export default function Example() {
+      return <SignInButton />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```jsx {{ filename: 'pages/index.js' }}
+    import { SignInButton } from '@clerk/remix'
+
+    export default function Home() {
+      return <SignInButton />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```astro {{ filename: 'pages/index.astro' }}
+    ---
+    import { SignInButton } from '@clerk/astro/components'
+    ---
 
-  <div>
     <SignInButton />
-  </div>
-  ```
-</CodeBlockTabs>
+    ```
+  </Tab>
+</Tabs>
 
 ### Custom usage
 
-In some cases, you will want to use your own button, or button text. You can do that by wrapping your button in the `<SignInButton>` component.
+You can create a custom button by wrapping your own button, or button text, in the `<SignOutButton>` component.
 
-<CodeBlockTabs type="framework" options={["Next.js", "React", "Remix", "Astro"]}>
-  ```jsx {{ filename: 'pages/index.js' }}
-  import { SignInButton } from '@clerk/nextjs'
+<Tabs items={["Next.js", "React", "Remix", "Astro"]}>
+  <Tab>
+    ```jsx {{ filename: 'pages/index.js' }}
+    import { SignInButton } from '@clerk/nextjs'
 
-  export default function Home() {
-    return (
-      <div>
+    export default function Home() {
+      return (
         <SignInButton>
-          <button>Sign in with Clerk</button>
+          <button>My custom button</button>
         </SignInButton>
-      </div>
-    )
-  }
-  ```
+      )
+    }
+    ```
+  </Tab>
 
-  ```jsx {{ filename: 'example.js' }}
-  import { SignInButton } from '@clerk/clerk-react'
+  <Tab>
+    ```jsx {{ filename: 'example.js' }}
+    import { SignInButton } from '@clerk/clerk-react'
 
-  export default function Example() {
-    return (
-      <div>
+    export default function Example() {
+      return (
         <SignInButton>
-          <button>Sign in with Clerk</button>
+          <button>My custom button</button>
         </SignInButton>
-      </div>
-    )
-  }
-  ```
+      )
+    }
+    ```
+  </Tab>
 
-  ```jsx {{ filename: 'pages/index.js' }}
-  import { SignInButton } from '@clerk/remix'
+  <Tab>
+    ```jsx {{ filename: 'pages/index.js' }}
+    import { SignInButton } from '@clerk/remix'
 
-  export default function Home() {
-    return (
-      <div>
+    export default function Home() {
+      return (
         <SignInButton>
-          <button>Sign in with Clerk</button>
+          <button>My custom button</button>
         </SignInButton>
-      </div>
-    )
-  }
-  ```
-
-  ```astro {{ filename: 'pages/index.astro' }}
-  ---
-  import { SignInButton } from '@clerk/astro/components'
-  ---
-
-  <div>
-    <SignInButton as="button"> Sign in with Clerk </SignInButton>
-  </div>
-  ```
-</CodeBlockTabs>
+      )
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    You must pass the `asChild` prop to the `<SignInButton>` component if you are passing children to it.
+
+    ```astro {{ filename: 'pages/index.astro' }}
+    ---
+    import { SignInButton } from '@clerk/astro/components'
+    ---
+
+    <SignInButton asChild>
+      <button>My custom button</button>
+    </SignInButton>
+    ```
+  </Tab>
+</Tabs>