PubButton

This is a button component that can be used to create buttons with various styles and sizes.

Default buttons

Prop - `color` Usage

There are a number of theme-colors available for the button, including 'blue', 'red', 'yellow', 'green', 'pink', 'cyan', 'purple', 'grey'. Below is a demo of each color.

vue

<template>
  <pub-button color="none">
    None
  </pub-button>
  <pub-button color="default">
    Default
  </pub-button>
  <pub-button color="blue">
    Blue
  </pub-button>
  <pub-button color="red">
    Red
  </pub-button>
  <pub-button color="green">
    Green
  </pub-button>
  <pub-button color="yellow">
    Yellow
  </pub-button>
  <pub-button color="pink">
    Pink
  </pub-button>
  <pub-button color="cyan">
    Cyan
  </pub-button>
  <pub-button color="purple">
    Purple
  </pub-button>
  <pub-button color="grey">
    Grey
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton } from 'vuelicity'
</script>

Outline buttons

Prop - `outline` Usage

The outline prop can be used to add an outline style to the button.

vue

<template>
  <pub-button
    color="default"
    outline
  >
    Default
  </pub-button>
  <pub-button
    color="blue"
    outline
  >
    Blue
  </pub-button>
  <pub-button
    color="red"
    outline
  >
    Red
  </pub-button>
  <pub-button
    color="green"
    outline
  >
    Green
  </pub-button>
  <pub-button
    color="yellow"
    outline
  >
    Yellow
  </pub-button>
  <pub-button
    color="pink"
    outline
  >
    Pink
  </pub-button>
  <pub-button
    color="cyan"
    outline
  >
    Cyan
  </pub-button>
  <pub-button
    color="purple"
    outline
  >
    Purple
  </pub-button>
  <pub-button
    color="grey"
    outline
  >
    Grey
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton } from 'vuelicity'
</script>

Pill buttons

Prop - `rounded` Usage

The rounded prop can be used to add rounded corners to the button.

vue

<template>
  <pub-button rounded="none">
    None
  </pub-button>
  <pub-button rounded="sm">
    Small
  </pub-button>
  <pub-button rounded="md">
    Medium
  </pub-button>
  <pub-button rounded="lg">
    Large
  </pub-button>
  <pub-button rounded="xl">
    Extra Large
  </pub-button>
  <pub-button rounded="full">
    Full
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton } from 'vuelicity'
</script>

Button sizes

Prop - `size` Usage

The size prop can be used to adjust the size of the button.

vue

<template>
  <pub-button size="xs">
    Extra Small
  </pub-button>
  <pub-button size="sm">
    Small
  </pub-button>
  <pub-button size="md">
    Medium
  </pub-button>
  <pub-button size="lg">
    Large
  </pub-button>
  <pub-button size="xl">
    Extra Large
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton } from 'vuelicity'
</script>

Disabled Buttons

Prop - `disabled` Usage

The disabled prop can be used to disable the button.

vue

<template>
  <!-- Click Fn is not working -->
  <pub-button
    disabled
    @click="onClick"
  >
    Default
  </pub-button>
  <pub-button
    color="green"
    disabled
  >
    Green
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton } from 'vuelicity'
function onClick () {
    console.log('clicked')
}
</script>

Button with loading state

Props - `loading` and `skeleton` Usage

The loading prop can be used to display a loading state. The skeleton prop can be used to display a skeleton loader.

vue

<template>
  <pub-button
    :loading="loading"
    @click="clickProcess"
  >
    {{ loading ? "Loading..." : "Click Me" }}
  </pub-button>
  <pub-button
    color="blue"
    :skeleton="skeletal"
  >
    Green
  </pub-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubButton } from 'vuelicity'

const skeletal = ref(true)
const loading = ref(false)

// onMounted(() => {
//     setTimeout(() => {
//         skeletal.value = false;
//     }, 2000);
// });

function clickProcess () {
    loading.value = !loading.value
    setTimeout(() => {
        loading.value = !loading.value
    }, 2000)
}
</script>

Buttons with icon

vue

<template>
  <pub-button
    color="blue"
    size="sm"
  >
    <template #prepend>
      <pub-icon name="cart" />
    </template>
    Buy Now
  </pub-button>
  <pub-button
    color="blue"
    size="sm"
  >
    Go to Payment
    <template #append>
      <pub-icon name="arrow-right" />
    </template>
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton, PubIcon } from 'vuelicity'
</script>

Button with label

vue

<template>
  <pub-button
    color="blue"
    size="sm"
  >
    <pub-badge
      class="w-4 h-4"
      rounded
    >
      5
    </pub-badge>
    Messages
  </pub-button>
  <pub-button
    color="yellow"
    size="sm"
  >
    Go to Cart
    <pub-badge
      class="w-4.5 h-4.5"
      rounded
    >
      9+
    </pub-badge>
  </pub-button>
</template>

<script lang="ts" setup>
import { PubBadge, PubButton } from 'vuelicity'
</script>

Icon buttons

vue

<template>
  <pub-button
    size="xs"
    color="blue"
    square
  >
    <pub-icon name="love" />
  </pub-button>
  <pub-button
    size="xs"
    color="blue"
    outline
    square
    rounded="full"
  >
    <pub-icon name="love" />
  </pub-button>
  <pub-button
    size="sm"
    color="blue"
    outline
    square
  >
    <pub-icon name="love" />
  </pub-button>
  <pub-button
    size="md"
    color="blue"
    square
    rounded="md"
  >
    <pub-icon name="love" />
  </pub-button>
  <pub-button
    size="md"
    color="blue"
    outline
    square
    rounded="lg"
  >
    <pub-icon name="love" />
  </pub-button>
  <pub-button
    size="lg"
    color="blue"
    outline
    square
  >
    <pub-icon name="love" />
  </pub-button>
  <pub-button
    size="xl"
    color="blue"
    square
  >
    <pub-icon name="love" />
  </pub-button>
</template>

<script lang="ts" setup>
import { PubButton, PubIcon } from 'vuelicity'
</script>

Reference

Properties

Name	Type	Default	Description	Options
color	String	`'default'`	The color color of the button.	`'none'`, `'default'`, `'blue'`, `'red'`, `'yellow'`, `'green'`, `'pink'`, `'cyan'`, `'grey'`
outline	Boolean	`false`	Whether to use the outline style.
rounded	String	`'none'`	The border radius of the button.	`'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'`
size	String	`'md'`	The size of the button.	`'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`
square	Boolean	`false`	Whether to render the button as a square.
as	String	`'button'`	The HTML element to render.	`'button'`, `'a'`
class	String	`''`	Additional CSS classes to apply.
disabled	Boolean	`false`	Whether the button is disabled.
loading	Boolean	`false`	Whether the button is in a loading state.
name	String	`''`	The name attribute for the button.
skeleton	Boolean	`false`	Whether to display a skeleton loader.
to	String	`'#'`	The href for the link when `as` is `'a'`.
type	String	`'button'`	The type attribute for the button.	`'button'`, `'submit'`, `'reset'`
linkAttr	String	`'href'`	The attribute to use for the link when `as` is `'a'`.

Slots

Name	Description
default	Default slot
prepend	Slot for content before the default slot
append	Slot for content after the default slot

PubButton ​

Default buttons ​

Prop - color Usage ​

Outline buttons ​

Prop - outline Usage ​

Pill buttons ​

Prop - rounded Usage ​

Button sizes ​

Prop - size Usage ​

Disabled Buttons ​

Prop - disabled Usage ​

Button with loading state ​

Props - loading and skeleton Usage ​

Buttons with icon ​

Button with label ​

Icon buttons ​

Reference ​

Properties ​

Slots ​