SBtn DOCS WIP

Shoyify Button

Shoyify provides a button component which extends the style of shoyo button. The button is pretty basic with some additional features.

Installation

If you have installed shoyify as plugin, every component comes with that, no need to install separately.

As Plugin

import { SBtn } from "shoyify";

const app = creatApp();
app.use(SBtn)

As Component inside .vue files

<script>
import { SBtn } from "shoyify";
export default {
    components:{
        SBtn
    }
}
</script>

Usage

Basic buttons

<template>
    <s-btn content="button" color="red"></s-btn>
    <s-btn content="button" color="blue"></s-btn>
    <s-btn content="button" color="indigo"></s-btn>
    <s-btn content="button" color="purple"></s-btn>
    <s-btn content="button" color="pink"></s-btn>
    <s-btn content="button" color="orange"></s-btn>
    <s-btn content="button" color="yellow"></s-btn>
    <s-btn content="button" color="green"></s-btn>
    <s-btn content="button" color="teal"></s-btn>
    <s-btn content="button" color="cyan"></s-btn>
</template>

Change in Size

<template>
    <s-btn content="button" size="sm" color="red"></s-btn>
    <s-btn content="button" size="block" color="blue"></s-btn>
</template>

Change State

<template>
    <s-btn content="button" disabled color="cyan"></s-btn> <br />
</template>
Loading CodeSandbox...

SBtn API

PropsTypeOptionsDescription
colorstringshoyo colorsChange color of shoyify button
sizestringsm , blockChange Size of shoyify button
contentstringShoyify button text to be displayed
disabledbooleanToggle the disabled state of shoyify button