Buttons

---
import Button from "@/components/ui/button.astro"
---

<div class="flex flex-wrap items-center justify-center gap-4">
	<Button variant="primary">Primary</Button>
	<Button variant="secondary">Secondary</Button>
	<Button variant="link">Link</Button>
	<Button variant="outline">Outline</Button>
	<Button variant="ghost">Ghost</Button>
	<Button variant="destructive">Destructive</Button>
	<Button variant="primary" disabled>Disabled</Button>
</div>

Tamaños

Instalación

npm install class-variance-authority clsx tailwind-merge

Luego copie el siguiente codigo, cree un archivo en src/components/ui/button.astro y peguelo ahí.

---
import { cn } from "@/lib/utils"
import type { HTMLAttributes } from "astro/types"
import { cva, type VariantProps } from "class-variance-authority"

const button = cva(
	"flex cursor-pointer items-center justify-center gap-2 rounded-md transition-all duration-300 ease-in-out focus:outline-none capitalize",
	{
		variants: {
			variant: {
				primary:
					"bg-neutral-100 text-neutral-900 hover:bg-neutral-800 hover:bg-neutral-200",
				secondary:
					"bg-neutral-800 text-neutral-300 hover:text-neutral-300 hover:bg-neutral-700",
				outline:
					"border hover:border-neutral-300 hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700 dark:hover:bg-neutral-800",
				link: "underline decoration-transparent hover:decoration-inherit",
				ghost:
					"hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
				destructive:
					"border border-red-200 hover:border-red-300 hover:bg-red-200 dark:border-red-800 dark:hover:border-red-700 dark:hover:bg-red-800 bg-red-50 text-red-600 dark:bg-red-400/10 dark:text-red-400"
			},
			size: {
				sm: "px-3 py-1 text-xs",
				md: "px-4 py-2 text-sm",
				lg: "px-5 py-2.5 text-sm",
				icon: "p-2"
			},
			disabled: { true: "opacity-50 cursor-not-allowed" }
		},
		defaultVariants: { variant: "primary", size: "md" }
	}
)

interface Props
	extends Omit<HTMLAttributes<"button">, "disabled">,
		Omit<HTMLAttributes<"a">, "type">,
		VariantProps<typeof button> {}

const {
	variant,
	class: className,
	size,
	disabled = false,
	...rest
} = Astro.props
const Tag = rest.href ? "a" : "button"
---

<Tag class={cn(button({ variant, size, disabled }), className)} {...rest}>
	<slot />
</Tag>

Importación

---
import Button from "@/components/ui/button.astro"
---

Para usar los alias ”@/” configure su archivo ts.config.json Mirar como configurar aquí

Component API

Button