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>

<!-- Slider: Swipe-to-confirm button -->
<button class="pm7-button pm7-button--slider">
  <span class="pm7-button--slider-text">Slide to confirm</span>
  <span class="pm7-button--slider-handle"></span>
</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';

    import '/packages/core/src/scripts/index.js';
// 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.

Button Groups

<!-- Horizontal button group -->
<div class="pm7-button-group">
  <button class="pm7-button pm7-button--outline">First</button>
  <button class="pm7-button pm7-button--outline">Second</button>
  <button class="pm7-button pm7-button--outline">Third</button>
</div>

<!-- Form actions with spacing -->
<div style="display: flex; gap: 1rem; justify-content: flex-end;">
  <button class="pm7-button pm7-button--ghost">Cancel</button>
  <button class="pm7-button pm7-button--primary">Save Changes</button>
</div>

Advanced Examples

<!-- Icon button with aria-label for accessibility -->
<button class="pm7-button pm7-button--ghost pm7-button--icon" aria-label="Settings">
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="3"></circle>
    <path d="M12 1v6m0 6v6m11-11h-6m-6 0H1"></path>
  </svg>
</button>

<!-- Loading state button -->
<button class="pm7-button pm7-button--primary" disabled>
  <svg class="pm7-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M21 12a9 9 0 11-6.219-8.56"/>
  </svg>
  Processing...
</button>

<!-- Button as link -->
<a href="/dashboard" class="pm7-button pm7-button--primary">
  Go to Dashboard
</a>

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

Terminology Guide

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