@metadiv-studio/action-buttons

@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

• Install the package:

  npm i @metadiv-studio/action-buttons
  

• 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} />;
  }
  

• 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.