<template>
  <div class="space-y-3">
    <AisRadioGroup
        v-model="selectedOption"
        :options="options"
        name="radios"
        buttons
        size="sm"
        :button-variant="selectedOption"
        button-font="sans"
    />

    <div><b>Selected Option: </b> {{ selectedOption }}</div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import AisRadioGroup from "@/components/radio-group/AisRadioGroup.vue";

  const selectedOption = ref('default')
  const options = ref(['default', 'primary', 'secondary', 'info', 'danger', 'warning', 'success'])
</script>
