Action Toolbar

Installation

Usage

import ActionToolbar from "@/components/ruixen/action-toolbar";
 
export default function App() {
  return (
    <div className="p-4">
      <ActionToolbar />
    </div>
  );
}

Features

• Action Buttons: Primary action buttons with icons
• Dropdown Menus: Additional actions in dropdown format
• Icon Integration: Lucide icons for all actions
• Responsive Design: Adapts to different screen sizes
• State Management: Active/inactive button states
• Keyboard Navigation: Full keyboard accessibility

Toolbar Actions

• Primary Actions: Save, Delete, Share, Export
• Secondary Actions: Copy, Move, Archive, Settings
• Dropdown Actions: Additional contextual options

Customization

You can customize the toolbar actions:

const actions = [
  {
    icon: <Save />,
    label: "Save",
    onClick: () => handleSave(),
    variant: "default",
  },
  {
    icon: <Delete />,
    label: "Delete",
    onClick: () => handleDelete(),
    variant: "destructive",
  },
];

Event Handlers

const handleSave = () => {
  // Save logic
};
 
const handleDelete = () => {
  // Delete logic
};
 
const handleShare = () => {
  // Share logic
};

Use Cases

Perfect for:

• Content Editors: Document editing toolbars
• File Managers: File operation actions
• Data Tables: Bulk action toolbars
• Admin Panels: Management action bars
• Media Players: Playback control toolbars