19 lines
1.3 KiB
Plaintext
19 lines
1.3 KiB
Plaintext
component Button {
|
|
props {
|
|
label = "Button"
|
|
type = "button"
|
|
variant = "primary"
|
|
size = "md"
|
|
disabled = false
|
|
loading = false
|
|
icon = ""
|
|
className = ""
|
|
}
|
|
view {
|
|
<button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
|
|
<span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
|
|
<span>{label}</span>
|
|
</button>
|
|
}
|
|
}
|