fix: Correct <Button> semantics by not wrapping the content (#221)

refactor: simplify <Button>
This commit is contained in:
Kendell R
2024-01-12 16:58:32 -08:00
committed by GitHub
parent 599c7c2414
commit 1ad639d60f
2 changed files with 17 additions and 21 deletions

View File

@@ -6,23 +6,21 @@
export let label = '';
</script>
<button on:click>
{#if href}
<a {href} {target} {...$$restProps} class={`button-${type}`} aria-label={label}>
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
{/if}
<slot />
</a>
{:else}
<div {...$$restProps} class={`button-${type}`} aria-label={label}>
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
{/if}
<slot />
</div>
{/if}
</button>
{#if href}
<a {href} {target} class={`button-${type}`} aria-label={label}>
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
{/if}
<slot />
</a>
{:else}
<button on:click class={`button-${type}`} aria-label={label}>
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
{/if}
<slot />
</button>
{/if}
<style>
button {
@@ -33,7 +31,7 @@
}
a,
div {
button {
min-width: max-content;
font-size: 0.95rem;
text-decoration: none;
@@ -72,7 +70,7 @@
letter-spacing: 0.01rem;
}
div:hover,
button:hover,
a:hover {
filter: brightness(85%);
}