Button

A customizable button component offering variant-based styling, size options, and support for rendering as different HTML blocks while preserving all native attributes.

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button>default</Button>

Install

pnpm dlx hybrid-astro-ui@latest add button

npx hybrid-astro-ui@latest add button

yarn dlx hybrid-astro-ui@latest add button

bunx hybrid-astro-ui@latest add button

Variant: ghost

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button variant="ghost">ghost</Button>

Variant: link (visual)

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button variant="link">link</Button>

Variant: outline

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button variant="outline">outline</Button>

Variant: anchor (real link)

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button as="a" href="#">anchor</Button>

Variant: disabled

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button variant="default" disabled >disabled</Button>

Variant: destructive

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<Button variant="destructive">destructive</Button>

Size

---
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<div>
<Button size="icon">X</Button>
<Button size="sm">SM</Button>
<Button size="md">MD</Button>
<Button size="lg">LG</Button>
</div>

Props