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-button"use client"
import * as React from "react"
import { Button } from "@/components/ui/heroui-button"
import { Spinner } from "@heroui/react"
import { Paperclip } from "lucide-react"
export default function LoadingState() {
const [loading, setLoading] = React.useState(false)
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<Button
variant="primary"
isPending={loading}
onPress={() => {
setLoading(true)
setTimeout(() => setLoading(false), 2200)
}}
>
{loading ? (<><Spinner />Uploading...</>) : (<><Paperclip className="h-4 w-4" />Upload File</>)}
</Button>
</div>
)
}