upend/webui/src/lib/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;
  export let outline = false;
  export let subdued = false;
  export let small = false;
  export let plain = false;
  export let color: string | undefined = "var(--active-color, var(--primary))";
</script>

<button
  on:click
  class:active
  class:outline
  class:subdued
  class:small
  class:plain
  {disabled}
  {title}
  style="--color: {color}"
>
  <Icon {name} />
  <div class="text">
    <slot />
  </div>
</button>

<style lang="scss">
  button {
    display: flex;
    flex-direction: column;
    align-items: center;

    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.66;

    &.plain {
      padding: 0;
    }

    display: flex;
    align-items: center;

    transition:
      opacity 0.2s,
      color 0.2s,
      border-color 0.2s;
  }

  button.subdued {
    opacity: 0.4;
  }

  .outline {
    border: 1px solid var(--foreground);
    border-radius: 4px;

    padding: 0.25em 1em;
    &.small {
      padding: 0.1em 0.8em;
    }
  }

  .active,
  button:hover {
    opacity: 1;
    color: var(--color);
    border-color: var(--color);
  }

  button:disabled {
    color: gray;
    pointer-events: none;
  }

  .text {
    font-size: 0.5em;
    text-align: center;
    margin-top: 0.2em;
  }
</style>