Components
Loading preview...
HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-width, disabled state, social sign-in buttons and a render-prop children API. Works in both light and dark themes.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-buttonimport { Button } from "@/components/ui/heroui-button"
import { Github, Apple } from "lucide-react"
function GoogleIcon() {
return (
<svg className="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z" />
<path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z" />
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" />
</svg>
)
}
export default function Social() {
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<div className="flex w-full max-w-xs flex-col gap-3">
<Button variant="secondary" fullWidth><GoogleIcon />Sign in with Google</Button>
<Button variant="secondary" fullWidth><Github className="h-4 w-4" />Sign in with GitHub</Button>
<Button variant="secondary" fullWidth><Apple className="h-4 w-4" />Sign in with Apple</Button>
</div>
</div>
)
}