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 { Globe, Plus, Mail, Trash2 } from "lucide-react"
export default function WithIcons() {
return (
<div className="flex min-h-screen w-full flex-wrap items-center justify-center gap-3 p-8">
<Button variant="primary"><Globe className="h-4 w-4" />Search</Button>
<Button variant="secondary"><Plus className="h-4 w-4" />Add Member</Button>
<Button variant="tertiary"><Mail className="h-4 w-4" />Email</Button>
<Button variant="danger"><Trash2 className="h-4 w-4" />Delete</Button>
</div>
)
}