@metadiv-studio/action-buttons

A flexible and responsive React component for creating action button groups with automatic responsive behavior and dropdown fallbacks.

🚀 Installation

npm i @metadiv-studio/action-buttons

📖 Description

The @metadiv-studio/action-buttons package provides a smart button group component that automatically handles responsive layouts. When screen space is limited, buttons can collapse into a dropdown menu, ensuring your UI remains clean and accessible across all device sizes.

Key Features

• Responsive Design: Buttons automatically collapse into dropdowns at configurable breakpoints
• Flexible Content: Support for text-only, icon-only, or mixed content buttons
• Multiple Variants: Built-in button styles (default, outline, destructive, secondary, ghost)
• Customizable Sizes: Small, default, large, and icon-only sizes
• Smart Collapse: Individual button collapse behavior with custom collapse content
• Accessibility: Built-in tooltips and proper ARIA attributes
• TypeScript Support: Full TypeScript definitions included

🎯 Usage Examples

Basic Action Buttons

import ActionButtons from '@metadiv-studio/action-buttons';

const basicButtons = [
  {
    variant: "default",
    content: "Primary Action",
    onClick: () => console.log("Primary clicked"),
    tooltip: "This is a primary action button"
  },
  {
    variant: "outline",
    content: "Secondary Action",
    onClick: () => console.log("Secondary clicked"),
    tooltip: "This is a secondary action button"
  },
  {
    variant: "destructive",
    content: "Delete",
    onClick: () => console.log("Delete clicked"),
    tooltip: "This will delete the item"
  }
];

function MyComponent() {
  return (
    <ActionButtons buttons={basicButtons} />
  );
}

Icon-only Buttons

import { Plus, Edit, Trash2 } from 'lucide-react';

const iconButtons = [
  {
    variant: "default",
    content: <Plus className="h-4 w-4" />,
    onClick: () => console.log("Add new item"),
    tooltip: "Add new item"
  },
  {
    variant: "outline",
    content: <Edit className="h-4 w-4" />,
    onClick: () => console.log("Edit item"),
    tooltip: "Edit item"
  },
  {
    variant: "destructive",
    content: <Trash2 className="h-4 w-4" />,
    onClick: () => console.log("Delete item"),
    tooltip: "Delete item"
  }
];

function MyComponent() {
  return (
    <ActionButtons buttons={iconButtons} size="icon" />
  );
}

Mixed Content Buttons

import { Download, Share2 } from 'lucide-react';

const mixedContentButtons = [
  {
    variant: "default",
    content: (
      <div className="flex items-center gap-2">
        <Download className="h-4 w-4" />
        <span>Download</span>
      </div>
    ),
    onClick: () => console.log("Download started"),
    tooltip: "Download the file"
  },
  {
    variant: "outline",
    content: (
      <div className="flex items-center gap-2">
        <Share2 className="h-4 w-4" />
        <span>Share</span>
      </div>
    ),
    onClick: () => console.log("Share dialog opened"),
    tooltip: "Share this item"
  }
];

function MyComponent() {
  return (
    <ActionButtons buttons={mixedContentButtons} />
  );
}

Responsive Buttons with Collapse

import { Eye, Star, Bookmark } from 'lucide-react';

const responsiveButtons = [
  {
    variant: "default",
    content: "View Details",
    collapse: "md", // Collapse at medium screens and below
    collapseContent: <Eye className="h-4 w-4" />, // Icon shown when collapsed
    onClick: () => console.log("View details clicked"),
    tooltip: "View item details"
  },
  {
    variant: "outline",
    content: "Add to Favorites",
    collapse: "lg", // Collapse at large screens and below
    collapseContent: <Star className="h-4 w-4" />,
    onClick: () => console.log("Added to favorites"),
    tooltip: "Add to favorites"
  },
  {
    variant: "secondary",
    content: "Bookmark",
    collapse: "xl", // Collapse at extra large screens and below
    collapseContent: <Bookmark className="h-4 w-4" />,
    onClick: () => console.log("Bookmarked"),
    tooltip: "Bookmark this item"
  }
];

function MyComponent() {
  return (
    <ActionButtons 
      buttons={responsiveButtons} 
      showCollapse="md" 
      collapseAlign="end"
    />
  );
}

Always Collapsed Layout

const userActionButtons = [
  {
    variant: "default",
    content: (
      <div className="flex items-center gap-2">
        <User className="h-4 w-4" />
        <span>Profile</span>
      </div>
    ),
    onClick: () => console.log("Profile page opened"),
    tooltip: "View your profile"
  },
  {
    variant: "outline",
    content: (
      <div className="flex items-center gap-2">
        <Settings className="h-4 w-4" />
        <span>Settings</span>
      </div>
    ),
    onClick: () => console.log("Settings opened"),
    tooltip: "Manage settings"
  }
];

function MyComponent() {
  return (
    <ActionButtons 
      buttons={userActionButtons} 
      showCollapse="always" 
      collapseAlign="center"
    />
  );
}

⚙️ Props

ActionButtons Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | "sm" \| "lg" \| "icon" \| "default" | "default" | Size of all buttons | | buttons | ActionButtonProps[] | [] | Array of button configurations | | showCollapse | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'always' | undefined | When to show collapse dropdown | | collapseAlign | 'start' \| 'center' \| 'end' | 'start' | Dropdown alignment |

ActionButtonProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" | - | Button style variant | | content | React.ReactNode | - | Button content (text, icon, or mixed) | | collapse | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'always' | - | When to collapse this button | | collapseContent | React.ReactNode | - | Content shown when button is collapsed | | onClick | () => void | - | Click handler function | | tooltip | string | - | Tooltip text for the button | | className | string | - | Additional CSS classes for the button | | collapseClassName | string | - | Additional CSS classes for collapsed state |

🎨 Button Variants

• default: Primary button style with solid background
• outline: Button with outline border and transparent background
• destructive: Button with destructive/danger styling (usually red)
• secondary: Secondary button style with muted appearance
• ghost: Minimal button style with transparent background

📱 Responsive Breakpoints

The component uses Tailwind CSS breakpoints for responsive behavior:

• xs: Extra small screens (default: 0px+)
• sm: Small screens (640px+)
• md: Medium screens (768px+)
• lg: Large screens (1024px+)
• xl: Extra large screens (1280px+)
• 2xl: 2X large screens (1536px+)

🔧 Advanced Configuration

Custom Collapse Behavior

You can control when individual buttons collapse and what content they show:

const advancedButtons = [
  {
    variant: "default",
    content: "Full Text Button",
    collapse: "md", // Collapse at medium screens
    collapseContent: "Text", // Show abbreviated text when collapsed
    onClick: () => console.log("Clicked"),
  },
  {
    variant: "outline",
    content: "Button with Icon",
    collapse: "lg", // Collapse at large screens
    collapseContent: <Icon className="h-4 w-4" />, // Show icon when collapsed
    onClick: () => console.log("Clicked"),
  }
];

Dropdown Alignment

Control the alignment of the collapsed dropdown menu:

<ActionButtons 
  buttons={buttons} 
  showCollapse="md" 
  collapseAlign="end" // Align dropdown to the right
/>

🎯 Use Cases

• Data Tables: Action buttons for edit, delete, view operations
• Card Components: Quick actions for content cards
• Toolbars: Application toolbars with responsive behavior
• Media Players: Control buttons that adapt to screen size
• User Interfaces: User action buttons that work on all devices
• Admin Panels: Administrative actions with responsive layout

🚀 Getting Started

1. Install the package:

   npm i @metadiv-studio/action-buttons

2. Import and use:

   import ActionButtons from '@metadiv-studio/action-buttons';
      
   function App() {
     const buttons = [
       { variant: "default", content: "Click me", onClick: () => alert("Hello!") }
     ];
        
     return <ActionButtons buttons={buttons} />;
   }

3. Customize as needed with different variants, sizes, and responsive behaviors.

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

📄 License

This project is licensed under the MIT License.