upend/webui/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} />
  <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;

    display: flex;
    align-items: center;

    transition: opacity 0.2s, color 0.2s;
  }

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

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

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