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)
.vue
files
As Component inside <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
Props | Type | Options | Description |
---|---|---|---|
color | string | shoyo colors | Change color of shoyify button |
size | string | sm , block | Change Size of shoyify button |
content | string | Shoyify button text to be displayed | |
disabled | boolean | Toggle the disabled state of shoyify button |