elk/components/status/StatusActionButton.vue

<script setup lang="ts">
defineProps<{
  text?: string | number
  content: string
  color: string
  icon: string
  activeIcon?: string
  hover: string
  groupHover: string
  active?: boolean
  disabled?: boolean
  as?: string
}>()

defineOptions({
  inheritAttrs: false,
})
</script>

<template>
  <component
    :is="as || 'button'" w-fit
    flex gap-1 items-center rounded group
    :hover="hover" focus:outline-none :focus-visible="hover"
    :class="active ? [color] : 'text-secondary'"
    v-bind="$attrs"
  >
    <CommonTooltip placement="bottom" :content="content">
      <div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
        <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
      </div>
    </CommonTooltip>

    <span v-if="text" :class="active ? [color] : 'text-secondary-light'" text-sm>{{ text }}</span>
  </component>
</template>