Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Sep 26, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed468b0
docs(astro): Update unstyled components custom usage
wobsoriano Sep 20, 2024
f6034a1
add aschild to props tables; remove unnecessary divs; add copy explai…
alexisintech Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 95 additions & 90 deletions docs/components/unstyled/sign-in-button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down Expand Up @@ -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>
Loading
Loading