85 lines
1.9 KiB
Svelte
85 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { HTMLButtonAttributes } from "svelte/elements";
|
|
import IconGlyph from "./IconGlyph.svelte";
|
|
|
|
type ButtonProps = Omit<HTMLButtonAttributes, "type"> & {
|
|
label: string;
|
|
variant?: "primary" | "secondary" | "danger" | "ghost";
|
|
size?: "default" | "compact";
|
|
icon?: string;
|
|
loading?: boolean;
|
|
type?: "button" | "submit" | "reset";
|
|
};
|
|
|
|
let {
|
|
label,
|
|
variant = "primary",
|
|
size = "default",
|
|
icon,
|
|
disabled = false,
|
|
loading = false,
|
|
type = "button",
|
|
class: className = "",
|
|
...buttonProps
|
|
}: ButtonProps = $props();
|
|
</script>
|
|
|
|
<button
|
|
{...buttonProps}
|
|
class={className ? `ui-button ${className}` : "ui-button"}
|
|
data-variant={variant}
|
|
data-size={size}
|
|
data-loading={loading}
|
|
{disabled}
|
|
{type}
|
|
>
|
|
{#if icon}
|
|
<IconGlyph name={icon} size="sm" />
|
|
{/if}
|
|
<span>{loading ? "Loading" : label}</span>
|
|
</button>
|
|
|
|
<style>
|
|
.ui-button {
|
|
display: inline-grid;
|
|
grid-auto-flow: column;
|
|
gap: var(--ui-space-2);
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 2.5rem;
|
|
border: var(--ui-border);
|
|
background: var(--ui-color-accent);
|
|
color: var(--ui-color-canvas);
|
|
cursor: pointer;
|
|
font-size: 0.76rem;
|
|
font-weight: 850;
|
|
letter-spacing: 0;
|
|
padding: 0 var(--ui-space-4);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ui-button[data-size="compact"] {
|
|
min-height: 2rem;
|
|
padding-inline: var(--ui-space-3);
|
|
}
|
|
|
|
.ui-button[data-variant="secondary"] {
|
|
background: var(--ui-color-surface-raised);
|
|
color: var(--ui-color-text);
|
|
}
|
|
|
|
.ui-button[data-variant="danger"] {
|
|
background: var(--ui-color-danger);
|
|
color: var(--ui-color-text);
|
|
}
|
|
|
|
.ui-button[data-variant="ghost"] {
|
|
background: transparent;
|
|
color: var(--ui-color-muted);
|
|
}
|
|
|
|
.ui-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
</style>
|