Default (Outline)
Primary Intent
Secondary Intent
Custom Label
With onPress Handler
"use client"
import { PreskokAuthButton } from "@/components/ui/preskok-ui/preskok-auth-button"
export function PreskokAuthButtonPreskokDemo() {
return (
<div className="space-y-4">
<div>
<h3 className="mb-3 text-sm font-medium">Default (Outline)</h3>
<PreskokAuthButton />
</div>
<div>
<h3 className="mb-3 text-sm font-medium">Primary Intent</h3>
<PreskokAuthButton intent="primary" />
</div>
<div>
<h3 className="mb-3 text-sm font-medium">Secondary Intent</h3>
<PreskokAuthButton intent="secondary" />
</div>
<div>
<h3 className="mb-3 text-sm font-medium">Custom Label</h3>
<PreskokAuthButton label="Sign in with Preskok" />
</div>
<div>
<h3 className="mb-3 text-sm font-medium">With onPress Handler</h3>
<PreskokAuthButton
onPress={() => {
console.log("Authenticate with Preskok")
}}
/>
</div>
</div>
)
}
Installation
CLI
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add preskok-auth-button
Usage
import { PreskokAuthButton } from "@/registry/preskok/ui/preskok-ui/preskok-auth-button"
export function PreskokAuthButtonDemo() {
return (
<PreskokAuthButton
onPress={() => {
// Handle Preskok authentication
}}
/>
)
}Props
All standard Button props are supported, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Continue with Preskok" | Custom label for accessibility |
intent | string | "outline" | Button intent (primary, secondary, etc.) |
Examples
Different Intents
<PreskokAuthButton intent="outline" />
<PreskokAuthButton intent="primary" />
<PreskokAuthButton intent="secondary" />Custom Label
<PreskokAuthButton label="Sign in with Preskok" />With Handler
<PreskokAuthButton
onPress={() => {
window.location.href = "/auth/preskok"
}}
/>