47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<script>
|
|
import "@spectrum-css/label/dist/index-vars.css"
|
|
|
|
export let size = "M"
|
|
export let grey = false
|
|
export let red = false
|
|
export let orange = false
|
|
export let yellow = false
|
|
export let seafoam = false
|
|
export let green = false
|
|
export let active = false
|
|
export let inactive = false
|
|
export let hoverable = false
|
|
export let outlineColor = null
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<span
|
|
on:click
|
|
class="spectrum-Label"
|
|
class:hoverable
|
|
class:spectrum-Label--small={size === "S"}
|
|
class:spectrum-Label--large={size === "L"}
|
|
class:spectrum-Label--grey={grey}
|
|
class:spectrum-Label--red={red}
|
|
class:spectrum-Label--green={green}
|
|
class:spectrum-Label--orange={orange}
|
|
class:spectrum-Label--yellow={yellow}
|
|
class:spectrum-Label--seafoam={seafoam}
|
|
class:spectrum-Label--active={active}
|
|
class:spectrum-Label--inactive={inactive}
|
|
style={outlineColor ? `border: 2px solid ${outlineColor}` : ""}
|
|
>
|
|
<slot />
|
|
</span>
|
|
|
|
<style>
|
|
.spectrum-Label--grey {
|
|
background-color: var(--spectrum-global-color-gray-500);
|
|
font-weight: 600;
|
|
}
|
|
.hoverable:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|