Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import "./Button.scss";
import Link from "$lib/components/Link";
import classNames from "$lib/util/classNames";
import type { Variant, Type } from "./buttonOptions";
export let isLink = false;
export let disabled = false;
export let unstyled = false;
export let variant: Variant = "primary";
const variantClassesDict: Record<Variant, string[]> = {
primary: [],
secondary: ["usa-button--secondary"],
base: ["usa-button--base"],
inverse: ["usa-button--inverse"],
"text-only": ["usa-button--text-only"],
outline: ["usa-button--outline"],
"outline-inverse": ["usa-button--outline", "usa-button--outline-inverse"],
big: ["usa-button--big"],
"big-inverse": ["usa-button--big", "usa-button--big-inverse"],
};
$: variantClasses = variantClassesDict[variant];
export let type: Type = "button";
let className = "";
export { className as class };
$: classes = classNames(
"usa-button",
...variantClasses,
unstyled && "usa-button--unstyled",
className,
);
</script>
{#if isLink}
<Link class={classes} {...$$restProps}>
<slot>Link</slot>
</Link>
{:else}
<button
{...$$restProps}
{type}
{disabled}
aria-disabled={disabled}
class={classes}
on:click
on:keydown
on:mousedown
>
<slot>Button</slot>
</button>
{/if}
|