RSK World - Vue Button & Card Components - Vue 3 Composition API with Slots & Scoped CSS | RSK World

Vue Button & Card Components - Overview - RSK World

Vue 3 Components UI/UX Slots CSS

Vue Button & Card Components is a modern Vue 3 component library featuring reusable BaseButton and BaseCard components. BaseButton includes 7 variants (primary, secondary, success, danger, warning, outline, ghost), 3 sizes (sm, md, lg), loading states, disabled states, block mode, and icon slots (left/right). BaseCard features 4 variants (default, elevated, outlined, flat), header/footer/body slots, header-image support, padding options (none, sm, md, lg), hover effects, clickable states, and loading overlays. Built with Vue 3.4 Composition API using script setup syntax, Vite 5 build tool, and scoped CSS for style encapsulation. 2026 by RSK World.

If you find this Vue Button & Card Components useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Vue Button & Card Components

BaseButton Component

Reusable Vue 3 button component with 7 color variants, 3 sizes, loading states, disabled states, block mode, and icon slots. Uses Composition API with computed classes and scoped CSS.

Variants: 7 color schemes — primary (blue), secondary (slate), success (green), danger (red), warning (orange), outline (bordered), ghost (transparent). Each with hover states and consistent styling.
Sizes: Small (sm) with compact padding 0.375rem 0.75rem, Medium (md) default with 0.5rem 1rem, Large (lg) with 0.75rem 1.5rem for prominent CTAs.
Loading state: Built-in spinner animation with SVG circle stroke animation. Button shows spinner and disables interaction during loading. Customizable loading slot.
Icon slots: Named slots for icon-left and icon-right with automatic margin spacing. Icons hidden during loading. Supports SVG icons or any Vue component.
Props: variant (string), size (string), disabled (boolean), loading (boolean), block (boolean), type (string). Emits click event with disabled/loading guards.

BaseCard Component

Flexible Vue 3 card component with 4 variants, multiple slots (header, header-image, body, footer), padding options, hover effects, clickable states, and loading overlays.

Variants: Default (subtle shadow), Elevated (prominent shadow for featured content), Outlined (clean border), Flat (minimal no shadow). Each with hover transform effects.
Slots: header slot for card title, header-image slot for full-width images (200px height with object-fit: cover), default slot for body content, footer for action buttons.
Padding options: none (content flush), sm (0.75rem), md (1.25rem default), lg (2rem spacious). Applied to body and footer areas.
Interactive states: hover prop enables lift effect on default/elevated, border color change on outlined. clickable prop adds cursor pointer and click event emission.
Loading overlay: Semi-transparent white overlay with centered spinner when loading prop is true. Pointer events disabled during loading state.

Vue 3 Composition API

Built with modern Vue 3 Composition API using script setup syntax. Computed properties for dynamic classes, defineProps for type validation, defineEmits for event handling.

Script setup: Both components use Vue 3 script setup syntax for cleaner code, automatic type inference, and better performance. No options API boilerplate.
Computed classes: buttonClasses and cardClasses computed properties generate dynamic CSS class arrays based on props. Supports variant, size, state classes.
Prop validation: defineProps with type, default, and validator functions. Validates variant values, size options, and boolean states. Runtime type checking.
Event handling: defineEmits declares click events. handleClick methods check disabled/loading states before emitting. Prevents interaction when appropriate.
Template refs: Components use standard Vue template syntax with v-if for conditional rendering (loading states, slot presence checks with $slots).

Slots System

Comprehensive slot architecture for maximum flexibility. Named slots for icons, headers, images, footers. Default slots for primary content. Scoped slots for advanced use cases.

Button slots: icon-left and icon-right for SVG or component icons, default slot for button text/label, loading slot for custom spinner. Icons auto-hide during loading.
Card slots: header for title content, header-image for featured images (rendered above header), default slot for main body content, footer for action buttons.
Slot detection: Card component checks $slots.header and $slots['header-image'] to conditionally render header area only when content provided.
Content projection: Slots allow parent components to inject any content — text, HTML, other Vue components, images — maintaining component reusability.
Deep selectors: Card uses :deep() pseudo-class for styling slotted images (object-fit: cover) without affecting component scope.

Scoped CSS

All styles scoped to components using Vue scoped CSS. Prevents style conflicts, enables safe class naming, maintains encapsulation. Modern CSS with transitions, animations, transforms.

Encapsulation: Scoped CSS ensures button and card styles do not leak to parent or sibling components. Safe to use generic class names like .btn, .card.
BEM-like naming: Component uses BEM-inspired naming — .btn__icon, .btn__content, .card__header, .card__body — for clear element relationships.
Transitions: All interactive elements have CSS transitions — buttons 0.2s ease for colors, cards 0.3s ease for shadows and transforms. Smooth state changes.
Animations: Loading spinners use @keyframes spin with 1s linear infinite rotation. SVG circle stroke dash array creates material-style indeterminate spinner.
Responsive hover: Card hover effects use transform: translateY(-2px) with enhanced shadow for depth perception. Mobile-friendly touch states.

Vite 5 Build Tool

Project configured with Vite 5 for fast development, optimized builds, and modern ES modules. @vitejs/plugin-vue for single-file component compilation.

Vite config: vite.config.js uses defineConfig with @vitejs/plugin-vue for Vue SFC support. Base path set to ./ for relative asset loading.
Scripts: package.json defines dev (vite), build (vite build), preview (vite preview). ES modules with type: module. No bundler complexity.
Dependencies: Minimal footprint — only vue ^3.4.0 as dependency, @vitejs/plugin-vue ^5.0.0 and vite ^5.0.0 as devDependencies. Lightweight setup.
Fast HMR: Vite provides instant hot module replacement during development. Changes to Vue components reflect immediately without full page reload.
Optimized builds: Production builds include tree-shaking, CSS extraction, and asset optimization. Static files ready for deployment to any web server.

Demo Application

Comprehensive App.vue demo page showcasing all component features. Interactive examples, feature highlights, RSK World branding with gradient header and responsive layout.

Demo sections: Button Components section with variant, size, state, and icon slot demos. Card Components section with variant, image, loading, and padding demos.
Interactive loading: Demo includes handleLoading helper function that triggers loading states on buttons and cards for 2-2.5 seconds to show animations.
Feature grid: Four feature cards highlighting Composition API, Slots, Scoped CSS, and Variants & Sizes. Emoji icons and descriptive text.
RSK branding: Gradient header (blue to purple), Vue logo badge, RSK World footer with contact info. Founded by Molla Samser, Designer Rima Khatun.
Responsive design: CSS Grid and Flexbox layout with media queries. Mobile-friendly at 768px breakpoint with stacked layouts and adjusted typography.

What You Get

Complete Vue Button & Card source: package.json, vite.config.js, index.html, src/App.vue, src/main.js, src/components/BaseButton.vue, src/components/BaseCard.vue, src/assets/main.css, LICENSE.

Source files: package.json (Vue 3.4, Vite 5), vite.config.js (Vue plugin, base path), index.html (entry point), src/main.js (app mount), src/App.vue (demo page).
Components: src/components/BaseButton.vue (275 lines) with 7 variants, 3 sizes, loading, icon slots. src/components/BaseCard.vue (264 lines) with 4 variants, slots, padding options.
Styling: src/assets/main.css for global styles (CSS reset, base styles). Scoped CSS in each component for encapsulated styles. No external CSS framework dependency.
Entry point: src/main.js creates Vue app with createApp, imports App component and main.css, mounts to #app element. Clean initialization.
Docs: LICENSE file with MIT license. README-style documentation in file headers with author credits (Molla Samser, Rima Khatun), contact info, copyright 2026.

Usage & Integration

Run npm install and npm run dev. Import BaseButton and BaseCard from components folder. Use in templates with props and slots. Customize CSS variables for theming.

Installation: npm install then npm run dev. App runs at default Vite dev server port. No additional dependencies beyond Vue 3.4 and Vite 5.
Button usage: Text. Add icon-left/right slots for icons.
Card usage:
Content
.
Customization: Edit CSS in scoped style blocks to change colors, spacing, shadows. Props accept variant/size strings. Slots accept any Vue content.
Production: npm run build generates dist folder with optimized assets. Deploy to Netlify, Vercel, GitHub Pages, or any static hosting. SEO-friendly static output.

Project Features

Vue 3 Button & Card Components with Composition API, Slots, Scoped CSS. BaseButton with 7 variants and loading states. BaseCard with 4 variants and image support. Vite 5 build.

Two components: BaseButton (reusable button with variants, sizes, loading, icon slots) and BaseCard (flexible card with variants, slots, padding, hover effects).
Vue 3 features: Composition API with script setup, computed properties, defineProps/defineEmits, scoped CSS. Modern Vue patterns without Options API boilerplate.
UI capabilities: 7 button colors, 3 sizes, block mode, disabled/loading states. 4 card styles, header images, padding variants, clickable cards with loading overlay.
Developer experience: Vite 5 for fast dev server and optimized builds. Hot module replacement. ES modules. Minimal dependencies. Self-contained components.
By RSK World: Founded by Molla Samser, Designer & Tester Rima Khatun. Free for educational and commercial use with MIT License. Support available via rskworld.in.

Credits & Acknowledgments

Vue Button & Card Components by Molla Samser (RSK World). Designer & Tester: Rima Khatun. Vue 3 reusable components with Composition API, slots, and scoped CSS. Built with Vue 3.4 and Vite 5.

Vue Button & Card: Production-ready Vue 3 component library. Free to use with attribution for educational and commercial projects. MIT License.
RSK World – Creator of Vue Button & Card Components. More projects at rskworld.in.
Author: Molla Samser (RSK World). Designer & Tester: Rima Khatun. Website: https://rskworld.in. Contact: +91 93305 39277, hello@rskworld.in. Vue Button & Card © 2026 Molla Samser.
Third-party credits: Vue.js – Progressive JavaScript framework; Vite – Next generation frontend tooling.
License: MIT. Use in personal and commercial projects; attribution to Molla Samser / RSK World appreciated. See LICENSE file for full terms.

Support & Contact

For Vue Button & Card customization, Vue 3 component questions, or frontend training, please contact us.

Email: hello@rskworld.in – Vue Button & Card customization, Vue 3 help, or integration support; RSK World.
Phone: +91 93305 39277 – direct contact for Vue component support; RSK World, India.
Website: RSKWORLD.in – more Vue and UI/UX projects; download Vue Button & Card and other open-source libraries.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147 – RSK World.
Author: Molla Samser – creator of Vue Button & Card; contact for credits, collaboration, or custom Vue work.
Documentation: Inline code comments and file headers with feature descriptions, usage examples, and SEO-friendly documentation.
Technical support: help with Vue 3 Composition API, component customization, or integrating into your Vue app; RSK World supports learners and teams.
Feature requests: suggest new component variants, slots, or accessibility improvements for future Vue Button & Card updates.

Additional Sponsored Content

Download Vue Button & Card Components

Get complete Vue Button & Card Components project with BaseButton, BaseCard, Vue 3 Composition API. You can view files or download source code directly.

Download Vue Button & Card Components