A customizable button component for TODOvue, supporting multiple variants, sizes, and icon modes.
npm install @todovue/tv-button



!License
!Release Date
!Bundle Size
!Node Version
!Last Commit
!Stars
> Demo: https://ui.todovue.blog/button/
import.meta.glob)type="icon" + iconOnly)customStylebash
npm install @todovue/tv-button
`
Using yarn:
`bash
yarn add @todovue/tv-button
`
Using pnpm:
`bash
pnpm add @todovue/tv-button
`Quick Start (SPA)
Global registration (main.js / main.ts):
`js
import { createApp } from 'vue'
import App from './App.vue'
import '@todovue/tv-button/style.css'
import TvButton from '@todovue/tv-button'createApp(App)
.use(TvButton) // enables globally
.mount('#app')
`
Local import inside a component:
`vue
Submit
`Style usage
$3
`ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'import '@todovue/tv-button/style.css'
import { TvButton } from '@todovue/tv-button'
const app = createApp(App)
app.component('TvButton', TvButton)
app.mount('#app')
`$3
`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@todovue/tv-button/nuxt'
]
})
`Nuxt 4 / SSR Usage
Create a plugin file: plugins/tv-button.client.ts (client-only is fine, or without suffix for SSR as it is safe):
`ts
import { defineNuxtPlugin } from '#app'
import TvButton from '@todovue/tv-button'export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(TvButton)
})
`
Use anywhere:
`vue
Details
`
Optional direct import (no plugin):
`vue
`Component Registration Options
| Approach | When to use |
|-------------------------------------------------------------------|------------------------------------------------|
| Global via app.use(TvButton) | Many usages across app / design system install |
| Local named import { TvButton } | Isolated / code-split contexts |
| Direct default import import TvButton from '@todovue/tv-button' | Single usage or manual registration |Props
All boolean style props have two interchangeable forms: a long form (isSomething) and a short alias.| Prop | Type | Default | Description |
|--------------|-------------------------------------------|-----------|--------------------------------------------------------|
| buttonText | string | '' | Optional text (alternative to slot). |
| variant | 'primary' \| 'secondary' \| 'success' ... | 'primary' | Visual style variant. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Button size. |
| customStyle | object | {} | Inline style overrides (
{ backgroundColor, color }). |
| icon | string | null | Name of bundled icon. |
| iconColor | string | 'white' | Icon color override. |
| iconPosition | 'left' \| 'right' | 'right' | Icon position relative to text. |
| type | 'button' \| 'submit' \| 'reset' \| 'icon' | 'button' | Native button type. Use 'icon' for icon-only styling. |
| ariaLabel | string | '' | Accessibility label (required if no text / icon-only). |
| iconOnly | boolean | false | Renders only the icon (no padding/background). |
| outlined | boolean | false | Outlined style. |
| rounded | boolean | false | Rounded corners. |
| disabled | boolean | false | Disables interaction. |
| loading | boolean | false | Shows spinner & disables. |
| full | boolean | false | Full width. |
| text | boolean | false | Text (minimal) style. |
| href | string | null | URL for native anchor tag. |
| to | string \| object | null | Route for RouterLink / NuxtLink. |
| target | string | null | Anchor target (e.g. '_blank'). |
| rel | string | null | Anchor rel attribute. |> Note: Because
type is bound to the native