Base Button

Base Button is a simple component to use; there are some predefined variants to choose to each case, variants to symbol an error, warning, and more. In addition, we can modify the style of button using custom-class or custom-styles.


Variant

Variant is a prop that defines one of some predefined styles available to each case as you need.


  • Primary

The primary variant can be used just calling the component, this is the default value for "variant" prop.


<BaseButton>Primary</BaseButton>

  • Outline Primary

The outline primary variant can be used with the props "variant" with value "outline-primary" as show below:

<BaseButton variant="outline-primary">Outline Primary</BaseButton>

  • Success

The success variant can be used with the props "variant" with value "success" as show below:

<BaseButton variant="success">Success</BaseButton>

  • Outline Success

The outline success variant can be used with the props "variant" with value "outline-success" as show below:

<BaseButton variant="outline-success">Outline Success</BaseButton>

  • Danger

The success variant can be used with the props "variant" with value "danger" as show below:

<BaseButton variant="danger">Danger</BaseButton>

  • Outline Danger

The outline success variant can be used with the props "variant" with value "outline-danger" as show below:

<BaseButton variant="outline-danger">Outline Danger</BaseButton>

  • Dark

The success variant can be used with the props "variant" with value "dark" as show below:

<BaseButton variant="dark">Dark</BaseButton>

  • Outline Dark

The outline success variant can be used with the props "variant" with value "outline-dark" as show below:

<BaseButton variant="outline-dark">Outline Dark</BaseButton>

Custom Style

There is a prop to add custom styles in the button, you can call like the example below and add any valid css syntax as a string.

<BaseButton custom-style="color: blue; background-color: yellow; border-radius: 0.2em;">Custom Style</BaseButton>

Custom Class

There is a way to edit the style of button using the Custom Style, but it's not good in cases that we want to modify a lot of things, in these cases can be better to use custom class. For usage of this prop, we just create styles for some class, and attribute this class as value for this props.

Note We can use css frameworks like tailwind css, and bootstrap passing in this custom class.

<BaseButton custom-class="rounded-none">Custom Class</BaseButton>

This class is from tailwind css to remove border-radius as mentioned before. Reference



Disabled

We can control the disabled state of button using the props "disabled".

<BaseButton :disabled="true">Loading</BaseButton>

Loading

We can control the loading state of button using the props "loading".

<BaseButton :loading="true">Loading</BaseButton>

Size

We can use predefined sizes of button, there are 3 variants: "small", "medium', and "large".

  • Small
<BaseButton size="small">Small</BaseButton>

  • Medium
<BaseButton size="medium">Medium</BaseButton>

  • Large
<BaseButton size="large">Large</BaseButton>

With Icon

We can add icon inside button, we can use leftIcon or rightIcon props. But for use, we need to implement a class that defines which icon will be used. The syntax implemented in the button is <i :class="icon" />. For default, the vuetage has the Font Awesome Icons as a dependency, and we can use icons from there as shown above.


Left Icon:

We can easily use a left icon in the button. The available icons are the ones from Font Awesome Icons.

<BaseButton left-icon="fa fa-check">With left icon</BaseButton>

Right Icon:

We can easily use a right icon in the button. The available icons are the ones from Font Awesome Icons.

<BaseButton right-icon="fa fa-check">With right icon</BaseButton>

Slots

There are 4 slots that we can use for base button.


  1. Label

This is the default slot, basically we can use inside the tags as showing above.

<BaseButton>Label</BaseButton>
  1. Spinner

This is a slot useful to change the default spinner when the button is loading.

<BaseButton>
 Label
 <template #spinner>
  <DifferentSpinner />
 </template>
</BaseButton>
  1. Left Icon

This is a slot useful to use left icon when the props "leftIcon" is not enough to add this icon.

<BaseButton>
 Label
 <template #left-icon>
  <img src="./assets/icon.png" alt="icon">
 </template>
</BaseButton>
  1. Right Icon

It works as the left icon slot, but for right side.

<BaseButton>
 Label
 <template #right-icon>
  <img src="./assets/icon.png" alt="icon">
 </template>
</BaseButton>