1.1.0 • Published 5 months ago
@todovue/tvbutton v1.1.0
TODOvue Button
TvButton is a custom button component for web applications.
Table of Contents
Installation
Install with npm or yarn
npm install @todovue/tvbuttonyarn add @todovue/tvbuttonImport the component:
import { TvButton } from "@todovue/tvbutton";You can also register it globally in main.js:
import { createApp } from "vue";
import App from "./App.vue";
import TvButton from "@todovue/tvbutton";
const app = createApp(App);
app.component("TvButton", TvButton);
app.mount("#app");Usage
<script setup>
import TvButton from "@todovue/tvbutton"; // Only if not imported in main.js
const handleClick = () => {
console.log("Clicked!");
};
</script>
<template>
<tv-button @click-button="handleClick">
Click me
</tv-button>
</template>Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | String | button | Defines the button type: "button" or "icon" (icon-only button). |
| customStyle | Object | {} | Custom styles for the button (e.g., { backgroundColor: "#000", color: "#fff" }). |
isOutlined or outlined | Boolean | false | If true, the button will be outlined instead of filled. |
isSmall or small | Boolean | false | If true, the button will be small. |
isLarge or large | Boolean | false | If true, the button will be large. |
isSuccess or success | Boolean | false | If true, the button will be styled as a success button. |
isInfo or info | Boolean | false | If true, the button will be styled as an info button. |
isWarning or warning | Boolean | false | If true, the button will be styled as a warning button. |
isError or error | Boolean | false | If true, the button will be styled as an error button. |
isDisabled or disabled | Boolean | false | If true, the button will be disabled. |
isText or text | Boolean | false | If true, the button will be styled as a text button. |
| icon | String | null | The name of the icon to be displayed inside the button. |
| iconPosition | String | right | The position of the icon (left or right). |
| buttonText | String | '' | The text inside the button (alternative to using slot). |
| ariaLabel | String | '' | The aria-label attribute for the button. |
🔹 Icons
You can use the following icons (icon="account"):
accountalertarrow-downarrow-leftarrow-rightarrow-upcancelclonedarkdownloadeditfavoritehelplightmenuminusplusremovesearchsettingssharestarupdate
Events
| Name | Description |
|---|---|
| click-button | Emitted when the button is clicked. You can use it to call a function, etc. |
| click | Emitted when the button is clicked. You can use it to call a function, etc. |
Customize
You can customize the button style using customStyle. You can include backgroundColor and color.
<script setup>
import TvButton from "@todovue/tvbutton";
const customStyle = {
backgroundColor: "#0f2e5b",
color: "#fff",
};
</script>
<template>
<tv-button :customStyle="customStyle">
Custom Button
</tv-button>
</template>🔥 Icon-Only Button (type="icon")
If you want a button with only an icon, use type="icon". The button will automatically adjust its size.
<tv-button icon="trash" type="icon" />
<tv-button icon="check" type="icon" iconColor="green" />
<tv-button icon="info" type="icon" iconColor="blue" />Development
Clone the repository and install the dependencies:
git clone https://github.com/TODOvue/todovue-button.git
cd todovue-button
yarn install🔹 Run the demo
yarn demo🔹 Run tests
yarn test:unit🔹 Run the linter
yarn lint🔹 Build the project (Not required for PRs)
yarn build