Buttons - Launchpad

Solid Buttons

<button class="lp-btn lp-btn-primary">Primary</button>
<button class="lp-btn lp-btn-secondary">Secondary</button>
<button class="lp-btn lp-btn-success">Success</button>
<button class="lp-btn lp-btn-danger">Danger</button>
<button class="lp-btn lp-btn-warning">Warning</button>
<button class="lp-btn lp-btn-info">Info</button>
<button class="lp-btn lp-btn-dark">Dark</button>
<button class="lp-btn lp-btn-light">Light</button>

Outline Buttons

<button class="lp-btn lp-btn-outline-primary">Primary</button>
<button class="lp-btn lp-btn-outline-secondary">Secondary</button>
<button class="lp-btn lp-btn-outline-success">Success</button>
<button class="lp-btn lp-btn-outline-danger">Danger</button>
<button class="lp-btn lp-btn-outline-warning">Warning</button>
<button class="lp-btn lp-btn-outline-info">Info</button>
<button class="lp-btn lp-btn-outline-dark">Dark</button>
<button class="lp-btn lp-btn-outline-light">Light</button>

Soft Buttons

<button class="lp-btn lp-btn-soft-primary">Primary</button>
<button class="lp-btn lp-btn-soft-secondary">Secondary</button>
<button class="lp-btn lp-btn-soft-success">Success</button>
<button class="lp-btn lp-btn-soft-danger">Danger</button>
<button class="lp-btn lp-btn-soft-warning">Warning</button>
<button class="lp-btn lp-btn-soft-info">Info</button>
<button class="lp-btn lp-btn-soft-dark">Dark</button>
<button class="lp-btn lp-btn-soft-light">Light</button>

Ghost Buttons

Transparent background with colored text. Hover shows a tinted background.

<button class="lp-btn lp-btn-ghost-primary">Primary</button>
<button class="lp-btn lp-btn-ghost-secondary">Secondary</button>
<button class="lp-btn lp-btn-ghost-success">Success</button>
<button class="lp-btn lp-btn-ghost-danger">Danger</button>
<button class="lp-btn lp-btn-ghost-warning">Warning</button>
<button class="lp-btn lp-btn-ghost-info">Info</button>
<button class="lp-btn lp-btn-ghost-dark">Dark</button>
<button class="lp-btn lp-btn-ghost-light">Light</button>

Link Buttons

Text-only buttons that look like links. Underline appears on hover.

<button class="lp-btn lp-btn-link">Primary</button>
<button class="lp-btn lp-btn-link-secondary">Secondary</button>
<button class="lp-btn lp-btn-link-success">Success</button>
<button class="lp-btn lp-btn-link-danger">Danger</button>
<button class="lp-btn lp-btn-link-warning">Warning</button>
<button class="lp-btn lp-btn-link-info">Info</button>
<button class="lp-btn lp-btn-link-dark">Dark</button>
<button class="lp-btn lp-btn-link-light">Light</button>

All Styles by Color

Each color with all 5 style variants: Solid, Outline, Soft, Ghost, Link.

Primary

Secondary

Success

Danger

Warning

Info

Dark

Light

<!-- Primary: all 5 styles -->
<button class="lp-btn lp-btn-primary">Solid</button>
<button class="lp-btn lp-btn-outline-primary">Outline</button>
<button class="lp-btn lp-btn-soft-primary">Soft</button>
<button class="lp-btn lp-btn-ghost-primary">Ghost</button>
<button class="lp-btn lp-btn-link">Link</button>

<!-- Same pattern for all 8 colors: secondary, success, danger, warning, info, dark, light -->

Sizes

Add .lp-btn-xs, .lp-btn-sm, .lp-btn-lg, or .lp-btn-xl for size variants.

<button class="lp-btn lp-btn-primary lp-btn-xs">Extra Small</button>
<button class="lp-btn lp-btn-primary lp-btn-sm">Small</button>
<button class="lp-btn lp-btn-primary">Default</button>
<button class="lp-btn lp-btn-primary lp-btn-lg">Large</button>
<button class="lp-btn lp-btn-primary lp-btn-xl">Extra Large</button>

Buttons with Icons

Icon before text.

Icon after text.

<!-- Icon before text -->
<button class="lp-btn lp-btn-primary">
  <span class="material-symbols-rounded lp-icon-sm">add</span> Create New
</button>

<!-- Icon after text -->
<button class="lp-btn lp-btn-primary">
  Next <span class="material-symbols-rounded lp-icon-sm">arrow_forward</span>
</button>

Icon-Only Buttons

Add .lp-btn-icon for square icon-only buttons.

Solid

Outline

Ghost

Sizes

<!-- Solid icon button -->
<button class="lp-btn lp-btn-primary lp-btn-icon">
  <span class="material-symbols-rounded lp-icon-sm">edit</span>
</button>

<!-- Outline icon button -->
<button class="lp-btn lp-btn-outline-danger lp-btn-icon">
  <span class="material-symbols-rounded lp-icon-sm">delete</span>
</button>

<!-- Ghost icon button -->
<button class="lp-btn lp-btn-ghost-info lp-btn-icon">
  <span class="material-symbols-rounded lp-icon-sm">info</span>
</button>

<!-- Icon button sizes -->
<button class="lp-btn lp-btn-primary lp-btn-icon lp-btn-xs">...</button>
<button class="lp-btn lp-btn-primary lp-btn-icon lp-btn-sm">...</button>
<button class="lp-btn lp-btn-primary lp-btn-icon">...</button>
<button class="lp-btn lp-btn-primary lp-btn-icon lp-btn-lg">...</button>
<button class="lp-btn lp-btn-primary lp-btn-icon lp-btn-xl">...</button>

Toolbar Buttons

Add .lp-btn-toolbar for neutral icon buttons. Add .lp-btn-bordered for a visible border.

Default (no border)

Bordered

Circular (no border)

Circular bordered

<!-- Default toolbar (no border) -->
<button class="lp-btn lp-btn-toolbar">
  <span class="material-symbols-rounded lp-icon-sm">apps</span>
</button>

<!-- Bordered toolbar -->
<button class="lp-btn lp-btn-toolbar lp-btn-bordered">
  <span class="material-symbols-rounded lp-icon-sm">settings</span>
</button>

<!-- Circular toolbar -->
<button class="lp-btn lp-btn-toolbar lp-btn-circle">
  <span class="material-symbols-rounded lp-icon-sm">apps</span>
</button>

<!-- Circular bordered toolbar -->
<button class="lp-btn lp-btn-toolbar lp-btn-circle lp-btn-bordered">
  <span class="material-symbols-rounded lp-icon-sm">settings</span>
</button>

Circular Icon Buttons

Add .lp-btn-circle to icon buttons to make them circular. Works with all color variants and sizes.

Solid Circular

Outline Circular

Soft Circular

Ghost Circular

Circle Sizes

<!-- Solid circle -->
<button class="lp-btn lp-btn-primary lp-btn-circle">
  <span class="material-symbols-rounded lp-icon-sm">add</span>
</button>

<!-- Outline circle -->
<button class="lp-btn lp-btn-outline-danger lp-btn-circle">
  <span class="material-symbols-rounded lp-icon-sm">close</span>
</button>

<!-- Circle sizes: xs, sm, default, lg, xl -->
<button class="lp-btn lp-btn-primary lp-btn-circle lp-btn-lg">
  <span class="material-symbols-rounded lp-icon-sm">add</span>
</button>

Avatar Buttons

Add .lp-btn-avatar for circular buttons with text or initials. Works with all color variants.

Solid

Outline

Soft

Sizes

<button class="lp-btn lp-btn-primary lp-btn-avatar">HV</button>
<button class="lp-btn lp-btn-outline-success lp-btn-avatar">CD</button>
<button class="lp-btn lp-btn-soft-info lp-btn-avatar">IJ</button>

<!-- Avatar sizes -->
<button class="lp-btn lp-btn-primary lp-btn-avatar lp-btn-xs">H</button>
<button class="lp-btn lp-btn-primary lp-btn-avatar lp-btn-sm">HV</button>
<button class="lp-btn lp-btn-primary lp-btn-avatar">HV</button>
<button class="lp-btn lp-btn-primary lp-btn-avatar lp-btn-lg">HV</button>
<button class="lp-btn lp-btn-primary lp-btn-avatar lp-btn-xl">HV</button>

Pill & Block Buttons

Add .lp-btn-pill for rounded pill shape. Add .lp-btn-block for full width.

Pill

Block (Full Width)

<!-- Pill -->
<button class="lp-btn lp-btn-primary lp-btn-pill">Primary</button>

<!-- Block (full width) -->
<button class="lp-btn lp-btn-primary lp-btn-block">Primary Block</button>

Hover Style Modifiers

Add hover modifier classes to change the hover behavior of any button.

.lp-btn-hover-lift — Elevates with shadow on hover

.lp-btn-hover-scale — Slightly grows on hover

.lp-btn-hover-soft — Fades slightly on hover

.lp-btn-hover-darken — Darkens on hover

.lp-btn-hover-none — Disables hover effect

<button class="lp-btn lp-btn-primary lp-btn-hover-lift">Lift</button>
<button class="lp-btn lp-btn-primary lp-btn-hover-scale">Scale</button>
<button class="lp-btn lp-btn-primary lp-btn-hover-soft">Soft</button>
<button class="lp-btn lp-btn-warning lp-btn-hover-darken">Darken</button>
<button class="lp-btn lp-btn-primary lp-btn-hover-none">No Hover</button>

Disabled State

Add the disabled attribute to prevent interaction. Works with all variants.

Solid Disabled

Outline Disabled

Soft & Ghost Disabled

<button class="lp-btn lp-btn-primary" disabled>Disabled</button>
<button class="lp-btn lp-btn-outline-success" disabled>Disabled</button>
<button class="lp-btn lp-btn-soft-danger" disabled>Disabled</button>
<button class="lp-btn lp-btn-ghost-info" disabled>Disabled</button>

Active State

Add .lp-btn-active to visually indicate a pressed/selected state. Uses the button's own color.

Solid Active

Outline Active

Soft Active

<button class="lp-btn lp-btn-primary lp-btn-active">Active</button>
<button class="lp-btn lp-btn-outline-success lp-btn-active">Active</button>
<button class="lp-btn lp-btn-soft-danger lp-btn-active">Active</button>

Loading Buttons

Add .lp-btn-loading class or data-lp-loading="true" attribute to show a spinner and disable interaction.

Solid Variants

Outline Variants

Soft & Ghost

Sizes

Icon Buttons

Interactive Demo — click to toggle loading

<!-- Via CSS class -->
<button class="lp-btn lp-btn-primary lp-btn-loading">Loading</button>

<!-- Via data attribute -->
<button class="lp-btn lp-btn-primary" data-lp-loading="true">Loading</button>

<!-- Interactive toggle -->
<button class="lp-btn lp-btn-primary" onclick="this.classList.toggle('lp-btn-loading')">
  Toggle Loading
</button>

Progress Buttons

Add .lp-btn-progress with an inner .lp-btn-progress-bar for animated progress feedback.

Interactive Demo

Solid Variants

<button class="lp-btn lp-btn-primary lp-btn-progress" id="upload">
  <div class="lp-btn-progress-bar"></div>
  <span class="material-symbols-rounded lp-icon-sm">upload</span>
  <span>Click to Upload</span>
</button>

<script>
  import { ProgressButton } from 'launchpad';
  const btn = ProgressButton.create('#upload');
  document.getElementById('upload').addEventListener('click', () => {
    btn.simulate(); // Auto-fills progress bar
  });
</script>

Link Buttons — Anchor Tags

All button classes work on <a> tags. Available in all 5 styles.

All styles as links

Solid Outline Soft Ghost Link

All colors as links

Primary Secondary Success Danger Warning Info Dark Light

Links with icons

link Visit Site download Download open_in_new Open

Link sizes

XS Link SM Link Default Link LG Link

<!-- Anchor styled as button -->
<a href="#" class="lp-btn lp-btn-primary">Solid</a>
<a href="#" class="lp-btn lp-btn-outline-primary">Outline</a>
<a href="#" class="lp-btn lp-btn-soft-primary">Soft</a>
<a href="#" class="lp-btn lp-btn-ghost-primary">Ghost</a>
<a href="#" class="lp-btn lp-btn-link">Link</a>

<!-- Link with icon -->
<a href="#" class="lp-btn lp-btn-primary">
  <span class="material-symbols-rounded lp-icon-sm">link</span> Visit Site
</a>

FAB (Floating Action Button)

Combine .lp-btn-circle with .lp-shadow-md or .lp-shadow-lg for Material Design FAB style.

<!-- FAB with shadow -->
<button class="lp-btn lp-btn-primary lp-btn-circle lp-shadow-md">
  <span class="material-symbols-rounded lp-icon-sm">add</span>
</button>

<!-- Large FAB with lift on hover -->
<button class="lp-btn lp-btn-primary lp-btn-circle lp-btn-xl lp-shadow-lg lp-btn-hover-lift">
  <span class="material-symbols-rounded lp-icon-sm">add</span>
</button>

FAB with Label

Wrap a circular button and an .lp-label inside .lp-fab. Use direction modifiers to place the label on any side. Pair contextual label colors with matching button colors.

Label Right (default) — contextual colors

Create

Delete

Approve

Alert

Details

Settings

Label Right — solid labels

New

Remove

Done

Label Left — contextual soft

Approve

Message

Cancel

Label Top

Edit

Favorite

Save

Label Bottom

Share

Download

Upload

Large labels

New Project

Publish

<!-- Label Right — soft contextual -->
<div class="lp-fab lp-fab-label-right">
  <button class="lp-btn lp-btn-primary lp-btn-circle lp-shadow-md">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
  <span class="lp-label lp-label-soft-primary">Create</span>
</div>

<!-- Label Right — solid contextual -->
<div class="lp-fab lp-fab-label-right">
  <button class="lp-btn lp-btn-danger lp-btn-circle lp-shadow-md">
    <span class="material-symbols-rounded lp-icon-sm">delete</span>
  </button>
  <span class="lp-label lp-label-danger">Remove</span>
</div>

<!-- Label Left -->
<div class="lp-fab lp-fab-label-left">
  <button class="lp-btn lp-btn-success lp-btn-circle lp-shadow-md">
    <span class="material-symbols-rounded lp-icon-sm">check</span>
  </button>
  <span class="lp-label lp-label-soft-success">Approve</span>
</div>

<!-- Label Top -->
<div class="lp-fab lp-fab-label-top">
  <button class="lp-btn lp-btn-primary lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">edit</span>
  </button>
  <span class="lp-label lp-label-soft-primary">Edit</span>
</div>

<!-- Label Bottom -->
<div class="lp-fab lp-fab-label-bottom">
  <button class="lp-btn lp-btn-dark lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">share</span>
  </button>
  <span class="lp-label lp-label-dark">Share</span>
</div>

<!-- Large FAB + large label -->
<div class="lp-fab lp-fab-label-right">
  <button class="lp-btn lp-btn-primary lp-btn-circle lp-btn-xl lp-shadow-lg lp-btn-hover-lift">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
  <span class="lp-label lp-label-lg lp-label-soft-primary">New Project</span>
</div>

FAB Menu (Speed Dial)

Click the main FAB to reveal a list of action buttons. Items can be plain icons or include contextual .lp-label tags. Toggle .lp-fab-menu-open on the wrapper.

Upward (default) — no label / left label / right label / solid label / soft label

Downward — no label / left label / right label / solid label / soft label

<!-- Upward (default) — icons only -->
<div class="lp-fab-menu">
  <div class="lp-fab-menu-list">
    <div class="lp-fab-menu-item">
      <button class="lp-btn lp-btn-danger lp-btn-circle lp-shadow-md">
        <span class="material-symbols-rounded lp-icon-sm">delete</span>
      </button>
    </div>
  </div>
  <button class="lp-fab-menu-trigger lp-btn lp-btn-primary lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
</div>

<!-- Upward — labels on LEFT -->
<div class="lp-fab-menu">
  <div class="lp-fab-menu-list">
    <div class="lp-fab-menu-item">
      <div class="lp-fab lp-fab-label-left">
        <button class="lp-btn lp-btn-danger lp-btn-circle lp-shadow-md">
          <span class="material-symbols-rounded lp-icon-sm">delete</span>
        </button>
        <span class="lp-label lp-label-soft-danger">Delete</span>
      </div>
    </div>
  </div>
  <button class="lp-fab-menu-trigger lp-btn lp-btn-primary lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
</div>

<!-- Upward — labels on RIGHT -->
<div class="lp-fab-menu">
  <div class="lp-fab-menu-list">
    <div class="lp-fab-menu-item">
      <div class="lp-fab lp-fab-label-right">
        <button class="lp-btn lp-btn-danger lp-btn-circle lp-shadow-md">
          <span class="material-symbols-rounded lp-icon-sm">delete</span>
        </button>
        <span class="lp-label lp-label-danger">Delete</span>
      </div>
    </div>
  </div>
  <button class="lp-fab-menu-trigger lp-btn lp-btn-dark lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
</div>

<!-- Downward — icons only -->
<div class="lp-fab-menu lp-fab-menu-down">
  <button class="lp-fab-menu-trigger lp-btn lp-btn-primary lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
  <div class="lp-fab-menu-list">
    <div class="lp-fab-menu-item">
      <button class="lp-btn lp-btn-danger lp-btn-circle lp-shadow-md">
        <span class="material-symbols-rounded lp-icon-sm">delete</span>
      </button>
    </div>
  </div>
</div>

<!-- Downward — labels on RIGHT -->
<div class="lp-fab-menu lp-fab-menu-down">
  <button class="lp-fab-menu-trigger lp-btn lp-btn-dark lp-btn-circle lp-btn-lg lp-shadow-lg">
    <span class="material-symbols-rounded lp-icon-sm">add</span>
  </button>
  <div class="lp-fab-menu-list">
    <div class="lp-fab-menu-item">
      <div class="lp-fab lp-fab-label-right">
        <button class="lp-btn lp-btn-danger lp-btn-circle lp-shadow-md">
          <span class="material-symbols-rounded lp-icon-sm">delete</span>
        </button>
        <span class="lp-label lp-label-soft-danger">Delete</span>
      </div>
    </div>
  </div>
</div>

JavaScript API

Programmatic control via Button and ProgressButton classes.

Interactive Demo

Button Class

import { Button } from 'launchpad';

// Create or get instance
const btn = Button.create('#my-button');

// Loading state
btn.loading('Saving...');   // Show spinner with optional text
btn.reset();                // Restore original state

// Disable/enable
btn.disable(true);          // Disable
btn.disable(false);         // Enable

// Events
btn.el.addEventListener('lp:button:loading', () => console.log('Loading started'));
btn.el.addEventListener('lp:button:reset', () => console.log('Loading ended'));

// Options
const btn2 = Button.create('#btn', {
  loadingText: 'Please wait...'  // Default loading text
});

// Data attribute loading
// <button data-lp-loading="true"> automatically shows spinner

ProgressButton Class

import { ProgressButton } from 'launchpad';

const pb = ProgressButton.create('#upload-btn');

// Manual control
pb.start(0);             // Begin progress at 0%
pb.setProgress(50);      // Set to 50%
pb.increment(10);        // Add 10%
pb.complete();           // Complete (100% + success state)
pb.reset();              // Reset to idle

// Auto-simulate
pb.simulate({
  speed: 150,            // Update interval (ms)
  min: 3,                // Min increment per tick
  max: 12                // Max increment per tick
});

// State checks
pb.getProgress();        // Current % (0-100)
pb.getState();           // 'idle' | 'progressing' | 'completed'

// Events
pb.el.addEventListener('lp:btn-progress:start', () => {});
pb.el.addEventListener('lp:btn-progress:progress', (e) => {
  console.log('Progress:', e.detail.value);
});
pb.el.addEventListener('lp:btn-progress:complete', () => {});
pb.el.addEventListener('lp:btn-progress:reset', () => {});

CSS Class Reference

Base

Class	Description
`.lp-btn`	Base button class (required on all buttons)

Color Variants (8 colors × 5 styles)

Class	Description
`.lp-btn-{color}`	Solid variant — primary, secondary, success, danger, warning, info, dark, light
`.lp-btn-outline-{color}`	Bordered with transparent background
`.lp-btn-soft-{color}`	Subtle tinted background
`.lp-btn-ghost-{color}`	Transparent background, colored text, tinted hover
`.lp-btn-link[-{color}]`	Text-only link style, underline on hover

Sizes

Class	Description
`.lp-btn-xs`	Extra small
`.lp-btn-sm`	Small
`(default)`	No class needed for default size
`.lp-btn-lg`	Large
`.lp-btn-xl`	Extra large

Shapes

Class	Description
`.lp-btn-pill`	Rounded pill shape
`.lp-btn-circle`	Circular button (for icons)
`.lp-btn-icon`	Square icon-only button (auto-sizes)
`.lp-btn-avatar`	Circular button with text/initials
`.lp-btn-block`	Full width button
`.lp-btn-toolbar`	Neutral toolbar icon button
`.lp-btn-bordered`	Adds a visible border to any button

Hover Modifiers

Class	Description
`.lp-btn-hover-lift`	Elevates with shadow on hover
`.lp-btn-hover-scale`	Slightly grows on hover
`.lp-btn-hover-soft`	Fades slightly on hover
`.lp-btn-hover-darken`	Darkens on hover
`.lp-btn-hover-none`	Disables all hover effects

States

Class	Description
`.lp-btn-loading`	Shows spinner, disables interaction
`.lp-btn-active`	Visually pressed/selected state
`disabled`	HTML attribute to disable button
`data-lp-loading="true"`	Data attribute alternative for loading

Progress Button

Class	Description
`.lp-btn-progress`	Progress button container
`.lp-btn-progress-bar`	Inner progress bar element
`.lp-btn-progress-progressing`	Applied during progress
`.lp-btn-progress-completed`	Applied on completion (success state)