Vuely
  • Introduction
  • Folder Structure
  • Vuely VueJs
    • Different Layouts
      • Adding Menu In Different Layouts
    • Installation
    • Adding New Component
    • Translate The App(Multi Language Support)
    • Adding New Widgets
    • Themes
    • Style Customization
    • Build an App from Scratch
    • Seed Project
    • Deployment
    • UI Components
      • Buttons
      • Cards
      • Selection controls
      • Carousel
      • Chips
      • Date/Month Pickers
      • Dialog
      • Grid
      • Input / Text field
      • List
      • Menu
      • Progress
      • Banner
      • Select
      • Slider
      • Tabs
      • Toolbar
      • Timepicker
      • Forms
  • Vuely-Laravel
    • Folder Structure
    • Installation Vuely-Laravel
    • Customization
  • Vuely-Laravel with Api Authentication
    • Getting Started
    • Passport Authentication
    • Run Vuely-Laravel-Passport
  • Vuely ExpressJs
    • Folder Structure
    • Installation
    • Layouts
    • Style Customization
    • Deployment
    • Translate the App
    • Browsers Compatibilty
    • Credits
  • Vuely Angular Version
    • Folder Structure
    • Installation
    • Layouts
    • Adding/Deleting Menu & Component
    • RTL
    • Deployment
  • Credits
  • Template Update
  • FAQ's (Frequently Asked Questions)
  • Changelog
  • Customer Support
Powered by GitBook
On this page
  1. Vuely VueJs
  2. UI Components

Buttons

The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.

v-btn is an HTML button or a tag enhanced with styling and for color="primary" Applies specified color to the control.

<v-btn class="ma-2" >Normal</v-btn>
<v-btn class="ma-2" color="primary">Primary</v-btn>
<v-btn class="ma-2" color="accent">Accent</v-btn>
<v-btn class="ma-2" color="secondary">Secondary</v-btn>
<v-btn class="ma-2" color="warning">Warning</v-btn>
<v-btn class="ma-2" color="error">Error</v-btn>
<v-btn class="ma-2" color="info">Info</v-btn>
<v-btn class="ma-2" color="success">Success</v-btn>
<v-btn class="ma-2" disabled>Disabled</v-btn>

PreviousUI ComponentsNextCards

Last updated 5 years ago