Button #
Button is a component that can be used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Basic Buttons #
<template>
<div>
<Button text="primary" btnClass="btn-primary" />
</div>
</template>
<script setup>
import Button from "@/components/Button";
</script>
TIP
You can use btnClass props for button type. Available types: btnClass="btn-primary", btnClass="btn-secondary", btnClass="btn-success", btnClass="btn-info", btnClass="btn-warning", btnClass="btn-danger", btnClass="btn-dark", btnClass="btn-light", btnClass="bg-white text-slate-900"
Outline Buttons
You can use btnClass props for for an outline button. For example: btnClass="btn-outline-primary", btnClass="btn-outline-secondary"
Light Color Buttons
Just add an extra class light to the btnClass for a light color button. For example: btnClass="btn-primary light", type="btn-secondary light"
Raised Buttons
Just add an extra class shadow-base2 to the btnClass for a raised button. For example: btnClass="btn-primary shadow-base2", btnClass="btn-secondary shadow-base2"
Rounded Buttons
Just add an extra class rounded-[999px] to the btnClass for a rounded button. For example: btnClass="btn-primary rounded-[999px]", btnClass="btn-secondary rounded-[999px]"
Rounded Outline Buttons
Just add an extra class rounded-[999px] to the btnClass for a rounded button. For example: btnClass="btn-outline-success rounded-[999px]", btnClass="btn-outline-secondary rounded-[999px]"
Icon Buttons
Just add an extra props icon to add and icon. For example: icon="heroicons-outline:newspaper". You can use iconPosition="right" props to move the icon on the right side.
Button Sizes
You can use btnClass="btn-sm" props for small button and btnClass="btn-xl" for large button.
Disabled Buttons
Just add an extra props isDisabled to make a button disabled.
Loading Buttons
Just add an extra props isLoading to make a button with loading animation.
Block Buttons
Just add an extra class block-btn to the btnClass to make a block button. For example: btnClass="btn-success lock-btn", btnClass="btn-secondary lock-btn"
Router Link Buttons
Just add an extra props link to add a link to the button. For example: link="/home"
Group Buttons #
<template>
<div>
<div class="btn-group">
<div class="grid grid-cols-1 gap-4">
<GroupButton />
<GroupButton btnClass="btn-primary" />
<GroupButton btnClass="btn-secondary" />
<GroupButton btnClass="btn-outline-dark" :groupButtons="prevNext" />
<GroupButton btnClass="btn-primary" :groupButtons="prevNext" />
</div>
</div>
</div>
</template>
<script setup>
import GroupButton from '@/components/Button/GroupButton';
export default {
components: {
GroupButton,
},
data() {
return {
prevNext: [
{
title: 'Back',
icon: 'heroicons-outline:chevron-left',
},
{
title: 'Next',
icon: 'heroicons-outline:chevron-right',
iconPosition: 'right',
},
],
};
},
};
</script>