Button

Vunix has a component called VButton which is used for calling actions or links.

Overview

Vunix <VButton> component generates either a <button> element, <a> element, a <router-link> for Vue.js, or a <nuxt-link> for Nuxt.js projects by default.

Customization

By default the component VButton is bundle with diffent variants included in the vunix preset. Check the commons configuration to add new variants.

Here's the ButtonConfig default configuration:

export interface ButtonConfig extends DefaultConfig {
  loading: {
    class: MethodOrStringType,
    sizes: MethodOrObject,
    icon: IconType
  }
}

As you can see the VButton includes a loading object that is the configuration of the icon when the button prop loading prop is set to true.

Here the exemple from the default Button.config.ts vunix preset which is built on top of Tailwind CSS.

const config = {
  class: ({ props }) => {
    const fixed = 'inline-flex transition ease-in-out duration-150 items-center justify-center border disabled:cursor-not-allowed focus:outline-none focus:shadow-outline'
    return `${fixed} ${(props.block) ? 'flex w-full' : 'inline-flex'}`
  },
  variants: {
    default: 'bg-blue-100 text-blue-900 hover:bg-blue-200 focus:outline-none focus:ring focus:ring-blue-300 font-medium',
    outline: 'border border-blue-500 text-blue-500 focus:outline-none focus:ring focus:ring-blue-300 font-medium',
    text: ''
  },
  sizes: {
    [SizeEnum.xs]: 'px-2 py-2 text-xs leading-4',
    [SizeEnum.sm]: 'px-3 py-2 text-sm leading-4',
    [SizeEnum.md]: 'px-4 py-2 text-sm leading-5',
    [SizeEnum.lg]: 'px-4 py-2 text-base leading-6',
    [SizeEnum.xl]: 'px-6 py-3 text-base leading-6'
  },
  loading: {
    class: 'ml-3 animate-spin',
    sizes: {
      [SizeEnum.xs]: 'h-4 w-4',
      [SizeEnum.sm]: 'h-4 w-4',
      [SizeEnum.md]: 'h-5 w-5',
      [SizeEnum.lg]: 'h-6 w-6',
      [SizeEnum.xl]: 'h-6 w-6'
    },
    icon: ArrowPathIcon
  }
} as ButtonConfig;

Check the commons section to see how to customize the DefaultConfig configuration fields.

Html tag type

The <VButton> generate a specific html tag according to the provided props. The default tag is the <button>. However, you can also render an <a> tag by providing an href prop value. You may also generate Vue Router <router-link> or Nuxt router<nuxt-link> from the to prop.

Sizes

You can use size prop to adjust size of the button

<VButton size="sm">VButton sm</VButton>
<VButton size="md">VButton md</VButton>
<VButton size="lg">VButton lg</VButton>

Roundness

You can use rounded prop to ajust border-radius of the button

<VButton rounded="xs">VButton xs</VButton>
<VButton rounded="sm">VButton sm</VButton>
<VButton rounded="md">VButton md</VButton>
<VButton rounded="lg">VButton lg</VButton>
<VButton rounded="xl">VButton xl</VButton>
<VButton rounded="full">VButton full</VButton>

Block

Add block prop to fill available space

<VButton block>I'm a very large button</VButton>

Disabled

You can use the native disabled attr.

<VButton disabled>I'm disabled</VButton>

If final html tag attribute is not a button (e.g. href or to), an aria-disabled will be injected.

Loading

You can use the prop loading to display a loading icon and set the button as disabled. When loading is set to true, the button will be disabled, and a spinning icon will be displayed next to the button text. The default loading icon can be customized in the loading.icon field of the ButtonConfig preset object.

<VButton loading>Submit</VButton>