<script setup>
import {ref} from 'vue'
import AisButton from '@c/button/AisButton.vue'
import BaseButton from '@c/button/BaseButton.vue'

const btn = ref(null)
const handleFocus = () => btn.value.focus()
</script>

<template>
  <div class="flex gap-4">
    <AisButton ref="btn" icon="person">
      Button To Focus
    </AisButton>

    <AisButton hover press
        @click="btn.focus()"
       variant="secondary"
    >
      Focus 1
    </AisButton>
    <AisButton hover press
        @click="handleFocus"
        variant="secondary"
    >
      Focus 2
    </AisButton>
  </div>
</template>

