<template>
  <section class="stack">
    <h2>EliBotao</h2>

    <div class="row">
      <EliBotao @click="contador++">Primário (clicks: {{ contador }})</EliBotao>
      <EliBotao variant="outlined">Outlined</EliBotao>
      <EliBotao variant="text">Text</EliBotao>
    </div>

    <div class="row">
      <EliBotao :disabled="true">Desabilitado</EliBotao>
      <EliBotao :loading="true">Carregando</EliBotao>
      <EliBotao color="success">Success</EliBotao>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { EliBotao } from "@/componentes/botao";

export default defineComponent({
  name: "BotaoPlayground",
  components: { EliBotao },
  setup() {
    const contador = ref(0);
    return { contador };
  },
});
</script>

<style scoped>
.stack {
  display: grid;
  gap: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>
