AnuButton
Filled
fill is default variant for button.
Use color prop to change the button color.
<template>
<div class="flex flex-wrap gap-4">
<ABtn>
Primary
</ABtn>
<ABtn color="success">
Success
</ABtn>
<ABtn color="info">
Info
</ABtn>
<ABtn color="warning">
Warning
</ABtn>
<ABtn color="danger">
Danger
</ABtn>
</div>
</template>Outlined
You can use variant="outline" to create outlined button.
Customize border-style of outlined buttons
To create outlined button with different border style just add relevant class.
e.g. To create outline button with dashed border, add border-dashed class.
<template>
<div class="flex flex-wrap gap-4">
<ABtn variant="outline">
Primary
</ABtn>
<ABtn
color="success"
variant="outline"
>
Success
</ABtn>
<ABtn
color="info"
variant="outline"
>
Info
</ABtn>
<ABtn
color="warning"
variant="outline"
>
Warning
</ABtn>
<ABtn
color="danger"
variant="outline"
>
Danger
</ABtn>
</div>
</template>Light
You can use variant="light" to create button with light background (Background with opacity).
<template>
<div class="flex flex-wrap gap-4">
<ABtn variant="light">
Primary
</ABtn>
<ABtn
color="success"
variant="light"
>
Success
</ABtn>
<ABtn
color="info"
variant="light"
>
Info
</ABtn>
<ABtn
color="warning"
variant="light"
>
Warning
</ABtn>
<ABtn
color="danger"
variant="light"
>
Danger
</ABtn>
</div>
</template>Text
Use variant="text" to create a text button.
<template>
<div class="flex flex-wrap gap-4">
<ABtn variant="text">
Primary
</ABtn>
<ABtn
variant="text"
color="success"
>
Success
</ABtn>
<ABtn
variant="text"
color="info"
>
Info
</ABtn>
<ABtn
variant="text"
color="warning"
>
Warning
</ABtn>
<ABtn
variant="text"
color="danger"
>
Danger
</ABtn>
</div>
</template>Icons
You can use icon prop to render icon in button.
Use append-icon prop to render icon after default slot.
You can also use default slot to render icon.
<template>
<ABtn>
<i class="i-bx-star" />
<span>Primary</span>
</ABtn>
</template><template>
<!-- 👉 Star -->
<div class="flex gap-x-4 flex-wrap gap-y-2">
<ABtn icon="i-bx-star">
<span>Primary</span>
</ABtn>
<ABtn
variant="outline"
icon="i-bx-star"
>
<span>Primary</span>
</ABtn>
<ABtn
variant="light"
icon="i-bx-star"
>
<span>Primary</span>
</ABtn>
<ABtn
variant="text"
icon="i-bx-star"
>
<span>Primary</span>
</ABtn>
</div>
<!-- 👉 Dollar Circle -->
<div class="mt-8 flex gap-x-4 flex-wrap gap-y-2">
<ABtn
color="success"
icon="i-bx-dollar-circle"
>
<span>Success</span>
</ABtn>
<ABtn
color="success"
variant="outline"
icon="i-bx-dollar-circle"
>
<span>Success</span>
</ABtn>
<ABtn
color="success"
variant="light"
icon="i-bx-dollar-circle"
>
<span>Success</span>
</ABtn>
<ABtn
color="success"
variant="text"
icon="i-bx-dollar-circle"
>
<span>Success</span>
</ABtn>
</div>
<!-- 👉 Heart -->
<div class="mt-8 flex gap-x-4 flex-wrap gap-y-2">
<ABtn
color="danger"
icon="i-bx-heart"
>
<span>Danger</span>
</ABtn>
<ABtn
color="danger"
variant="outline"
icon="i-bx-heart"
>
<span>Danger</span>
</ABtn>
<ABtn
color="danger"
variant="light"
icon="i-bx-heart"
>
<span>Danger</span>
</ABtn>
<ABtn
color="danger"
variant="text"
icon="i-bx-heart"
>
<span>Danger</span>
</ABtn>
</div>
</template>Block
Add w-full class to make block button.
<template>
<div class="grid-row grid-cols-2">
<ABtn class="w-full">
Primary
</ABtn>
<ABtn
class="w-full"
color="success"
>
Success
</ABtn>
</div>
</template>Icon Only
Use icon-only prop to render icon with icon only button.
<template>
<div class="flex flex-wrap gap-4">
<ABtn
icon-only
icon="i-bx-trophy"
/>
<ABtn
icon="i-bx-trophy"
icon-only
variant="outline"
/>
<ABtn
icon="i-bx-trophy"
icon-only
variant="light"
/>
<ABtn
icon="i-bx-trophy"
icon-only
variant="text"
/>
</div>
</template>Sizing
You can use font-size utility to adjust the size of button.
TIP
If you have container with bigger font size and need default sized button use text-base class.
<template>
<div class="flex flex-wrap gap-4">
<!-- 👉 xs -->
<ABtn class="text-xs">
text-xs
</ABtn>
<!-- 👉 Default -->
<ABtn>Default</ABtn>
<!-- 👉 xl -->
<ABtn class="text-xl">
text-xl
</ABtn>
<!-- 👉 2xl -->
<ABtn class="text-2xl">
text-2xl
</ABtn>
</div>
</template>Roundness
You can adjust button roundness using border-radius utilities.
<template>
<div class="flex flex-wrap gap-4">
<ABtn class="rounded-0">
rounded-0
</ABtn>
<ABtn
color="success"
class="rounded"
>
rounded
</ABtn>
<ABtn
color="info"
class="rounded-lg"
>
rounded-lg
</ABtn>
<ABtn
color="warning"
class="rounded-xl"
>
rounded-xl
</ABtn>
<ABtn
color="danger"
class="rounded-2xl"
>
rounded-2xl
</ABtn>
</div>
</template>Loading
You can use the loading prop to inform about a background process or asynchronous operation. This property will display a ALoading component (by default) instead of the icon and/or label of the button.
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(false)
const loadingIcon = ref(false)
const iconOnlyLoading = ref(false)
</script>
<template>
<div class="flex gap-4">
<ABtn
:loading="loading"
@click="loading = !loading"
>
Click to load
</ABtn>
<ABtn @click="iconOnlyLoading = !iconOnlyLoading">
<ALoadingIcon
icon="i-bx-cloud-upload"
:loading="iconOnlyLoading"
/>
<span>Upload</span>
</ABtn>
<ABtn
:loading="loadingIcon"
icon-only
icon="i-bx-heart"
@click="loadingIcon = !loadingIcon"
/>
</div>
</template>API
Set component in disabled state
Set button loading state.
Although, loading prop accepts boolean value, we set default value to undefined to indicate button won't ever use loading (show/hide) and won't render ASpinner component.
However, if loading prop is set to any boolean value (false/true) it will always render ASpinner component.
Mark button as icon only button to apply square styling
Render icon before button text
Append icon after button text
Default slot for rendering button content