Skip to content
On this page

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

vue
<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

vue
<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>

COPYRIGHT © 2022 Codeshaper, All rights reserved.