PubButton

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

Default buttons

Prop - theme Usage

There are a number of themes available for the button, including 'none', 'default', 'blue', 'red', 'yellow', 'green', 'magenta', 'cyan', 'light', 'dark'. Below is a demo of each theme.

<template>
    <pub-button theme="none">None</pub-button>
    <pub-button theme="default">Default</pub-button>
    <pub-button theme="blue">Blue</pub-button>
    <pub-button theme="red">Red</pub-button>
    <pub-button theme="green">Green</pub-button>
    <pub-button theme="yellow">Yellow</pub-button>
    <pub-button theme="magenta">Magenta</pub-button>
    <pub-button theme="cyan">Cyan</pub-button>
    <pub-button theme="light">Light</pub-button>
    <pub-button theme="dark">Dark</pub-button>
</template>

<script 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.

<template>
    <pub-button theme="default" outline>Default</pub-button>
    <pub-button theme="blue" outline>Blue</pub-button>
    <pub-button theme="red" outline>Red</pub-button>
    <pub-button theme="green" outline>Green</pub-button>
    <pub-button theme="yellow" outline>Yellow</pub-button>
    <pub-button theme="magenta" outline>Magenta</pub-button>
    <pub-button theme="cyan" outline>Cyan</pub-button>
    <pub-button theme="light" outline>Light</pub-button>
    <pub-button theme="dark" outline>Dark</pub-button>
</template>

<script setup>
import { PubButton } from "vuelicity";
</script>

Pill buttons

Prop - rounded Usage

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

<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 setup>
import { PubButton } from "vuelicity";
</script>

Button sizes

Prop - size Usage

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

<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 setup>
import { PubButton } from "vuelicity";
</script>

Disabled Buttons

Prop - disabled Usage

The disabled prop can be used to disable the button.

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

<script 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.

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

<script setup>
import { PubButton } from "vuelicity";
import { ref } from "vue";

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

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

<script setup>
import { PubButton, PubIcon } from "vuelicity";
</script>

Button with label

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

<script setup>
import { PubButton, PubBadge } from "vuelicity";
</script>

Icon buttons

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

<script setup>
import { PubButton, PubIcon } from "vuelicity";
</script>

Reference

Properties

Name	Type	Default	Description	Options
theme	String	'default'	The color theme of the button.	'none', 'default', 'blue', 'red', 'yellow', 'green', 'magenta', 'cyan', 'light', 'dark'
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