41 lines
897 B
Plaintext
41 lines
897 B
Plaintext
component Button {
|
|
props {
|
|
label = "Button"
|
|
type = "button"
|
|
variant = "primary"
|
|
size = "md"
|
|
disabled = false
|
|
loading = false
|
|
icon = ""
|
|
iconPosition = "start"
|
|
fullWidth = false
|
|
className = ""
|
|
}
|
|
|
|
view {
|
|
<button
|
|
type="{type}"
|
|
disabled="{disabled || loading}"
|
|
aria-busy="{loading}"
|
|
class="wire-btn wire-btn--{variant} wire-btn--{size} {className}"
|
|
class:w-full='{fullWidth}'
|
|
>
|
|
{#if loading}
|
|
<span class="wire-spinner" aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
{#if icon && !loading && iconPosition === "start"}
|
|
<span class="{icon} size-4 shrink-0" aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
<span>{label}</span>
|
|
|
|
{#if icon && !loading && iconPosition === "end"}
|
|
<span class="{icon} size-4 shrink-0" aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
<slot />
|
|
</button>
|
|
}
|
|
}
|