Button

Buttons trigger actions. They communicate what will happen when users interact with them.

When to use

• To trigger an action or event
• To submit or reset a form
• To navigate to another page or section
• To open a dialog or menu

Key features

• Multiple variants - Primary, secondary, outline, ghost, destructive, and link
• Three sizes - Small, medium (default), and large
• Icon support - Add icons before or after text, or use icon-only buttons
• Full width option - Buttons can span the full width of their container
• Button groups - Group related actions together
• Accessible - Full keyboard navigation and screen reader support

Anatomy

A button consists of:

• Container - The clickable area
• Label - Text that describes the action
• Icon - Optional visual indicator
• State - Visual feedback (hover, active, disabled)

Installation

npm install @pm7/core

CSS Classes

Data Attributes

Buttons do not use any special data attributes. They rely on standard HTML attributes and CSS classes for functionality.

Basic Usage

<button class="pm7-button pm7-button--primary">
  Click me
</button>

Variants

<!-- Primary: Main actions -->
<button class="pm7-button pm7-button--primary">Primary</button>

<!-- Secondary: Alternative actions -->
<button class="pm7-button pm7-button--secondary">Secondary</button>

<!-- Outline: Less prominent actions -->
<button class="pm7-button pm7-button--outline">Outline</button>

<!-- Ghost: Minimal styling -->
<button class="pm7-button pm7-button--ghost">Ghost</button>

<!-- Destructive: Dangerous actions -->
<button class="pm7-button pm7-button--destructive">Delete</button>

<!-- Link: Navigation styled as button -->
<button class="pm7-button pm7-button--link">Link</button>

Sizes

<!-- Small (36px height) -->
<button class="pm7-button pm7-button--primary pm7-button--sm">Small</button>

<!-- Medium (40px height, default - no size class needed) -->
<button class="pm7-button pm7-button--primary">Medium</button>

<!-- Large (48px height) -->
<button class="pm7-button pm7-button--primary pm7-button--lg">Large</button>

PM7 Special Features

• 6Stars Hover Effect: Primary buttons feature a unique "6stars" hover animation that creates a subtle sparkle effect
• Interactive Feedback: Buttons transform 1px down on click for tactile feedback

CSS Customization

PM7 buttons can be customized using CSS custom properties:

:root {
  /* Border radius */
  --pm7-button-radius: 0.375rem;
  
  /* Typography */
  --pm7-button-font-size: 0.875rem;
  --pm7-button-font-weight: 500;
  --pm7-button-line-height: 1.25rem;
  
  /* Spacing */
  --pm7-button-padding-y: 0.5rem;
  --pm7-button-padding-x: 1rem;
  
  /* Shadows */
  --pm7-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pm7-button-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --pm7-button-shadow-active: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pm7-button-focus-shadow: 0 0 0 3px rgb(28 134 239 / 0.2);
}

JavaScript API

import { PM7Button, initButtons } from '@pm7/core';

// Auto-initialization (happens automatically on DOMContentLoaded)
// Adds 6stars effect to all primary/default buttons

// Manual initialization for dynamically added buttons
const button = document.querySelector('.pm7-button--primary');
const pm7Button = new PM7Button(button);

// Or initialize all buttons manually
initButtons();

// Standard event handling
document.querySelector('.pm7-button').addEventListener('click', (e) => {
  console.log('Button clicked');
});

Note: The PM7Button class automatically adds the "6stars" hover effect to primary and default button variants. This effect creates floating star animations on hover, reinforcing the PM7 brand identity.

React Usage

import { Button } from '@pm7/react';

function MyComponent() {
  return (
    <>
      <Button variant="primary" onClick={handleClick}>
        Click me
      </Button>
      
      <Button variant="outline" size="sm" disabled>
        Disabled
      </Button>
      
      <Button variant="destructive" fullWidth>
        Delete All
      </Button>
      
      {/* Advanced: Use asChild for component composition */}
      <Button asChild variant="primary">
        <a href="/dashboard">Go to Dashboard</a>
      </Button>
    </>
  );
}

React Props

Accessibility

• All buttons are keyboard accessible
• Use descriptive text for screen readers
• For icon-only buttons, add aria-label
• Disabled buttons are properly announced
• Focus states are clearly visible with customizable shadow

Copy this link that can be used as documentation for working with this component: