n-float-button

Name: n-float-button
Availability: InStock
Author: jiaiyan

Provide a reusable floating action button component for Naive UI applications.

8|3|Updated Mar 13, 2026

Search Tags:#vue3 #ui-patterns #fab #ui-component #toolbar #naive-ui #float-button

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-float-button

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-float-button
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-float-button
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-float-button

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Floating action button provides quick access to primary actions, reducing UI friction and maximizing action discoverability.

Core Features & Use Cases

Positioning options (top, bottom, left, right) for flexible placement
Supports button groups and menus for multi-action workflows
Badge integration and description slot for contextual actions
Works with n-icon and Naive UI theming for consistent design across apps
Use case: dashboards, mobile UIs, toolbars, and floating action scenarios

Quick Start

Place an n-float-button at a corner and attach an icon to initiate primary actions.

Frequently Asked Questions about n-float-button

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a floating action button in a Vue 3 Naive UI dashboard?▼

To add a floating action button in a Vue 3 Naive UI dashboard, use a reusable component that exposes quick primary actions. You position it at a corner, attach an icon, and configure options like shape and badge integration.

Can I use a floating action button with a menu for multi-action workflows in Vue 3?▼

Yes, you can use a floating action button with a menu for multi-action workflows in Vue 3. The component supports button groups and menu triggers to handle multiple actions, reducing UI friction and maximizing action discoverability.

What positioning options are available for a floating action button in Naive UI?▼

Positioning options available for a floating action button in Naive UI include top, bottom, left, and right. This allows flexible placement across dashboards, mobile interfaces, toolbars, and panels where accessible actions are needed.

Does the Naive UI floating action button support contextual badges and descriptions?▼

Yes, the Naive UI floating action button supports contextual badges and descriptions. It includes badge integration and description slots, allowing you to provide contextual actions while maintaining consistent design with n-icon and Naive UI theming.

When should I use a floating action button instead of a standard toolbar in a mobile UI?▼

You should use a floating action button instead of a standard toolbar in a mobile UI when you need to provide quick access to primary actions. It reduces UI friction and maximizes action discoverability for floating action scenarios.