<template>
  <el-row>
    <kk-button size="large">Large</kk-button>
    <kk-button>Default</kk-button>
    <kk-button size="small">Small</kk-button>
    <kk-button size="large" :icon="Search">Search</kk-button>
    <kk-button :icon="Search">Search</kk-button>
    <kk-button size="small" :icon="Search">Search</kk-button>
  </el-row>
  <el-row class="my-4">
    <kk-button size="large" round>Large</kk-button>
    <kk-button round>Default</kk-button>
    <kk-button size="small" round>Small</kk-button>
    <kk-button size="large" :icon="Search" round>Search</kk-button>
    <kk-button :icon="Search" round>Search</kk-button>
    <kk-button size="small" :icon="Search" round>Search</kk-button>
  </el-row>
  <el-row>
    <kk-button :icon="Search" size="large" circle />
    <kk-button :icon="Search" circle />
    <kk-button :icon="Search" size="small" circle />
  </el-row>
</template>

<script setup lang="ts">
import { KkButton } from 'kankan-components'
import { Search } from '@kankan-components/icons-vue'
</script>
