upend/ui/src/components/utils/IconButton.svelte

<script lang="ts">
  import Icon from "./Icon.svelte";

  export let name: string;
  export let active = false;
  export let disabled = false;
  export let title: string | undefined = undefined;
</script>

<button on:click class:active {disabled} {title}>
  <Icon {name} />
</button>

<style lang="scss">
  button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.66;

    transition: opacity 0.2s, color 0.2s;
  }

  .active,
  button:hover {
    opacity: 1;
    color: var(--active-color, var(--primary));
  }
</style>