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-outlined lp-icon-sm">add</span> Create New
</button>

<!-- Icon after text -->
<button class="lp-btn lp-btn--primary">
  Next <span class="material-symbols-outlined 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-outlined lp-icon-sm">edit</span>
</button>

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

<!-- Ghost icon button -->
<button class="lp-btn lp-btn--ghost-info lp-btn--icon">
  <span class="material-symbols-outlined 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-outlined lp-icon-sm">apps</span>
</button>

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

<!-- Circular toolbar -->
<button class="lp-btn lp-btn--toolbar lp-btn--circle">
  <span class="material-symbols-outlined 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-outlined 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-outlined lp-icon-sm">add</span>
</button>

<!-- Outline circle -->
<button class="lp-btn lp-btn--outline-danger lp-btn--circle">
  <span class="material-symbols-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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-outlined 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) — icons only / soft labels / solid labels

Downward — icons only / with labels

Leftward — icons only / with labels

Rightward — icons only / with labels

<!-- 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-outlined 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-outlined lp-icon-sm">add</span>
  </button>
</div>

<!-- Upward — with labels (circles auto-center on trigger) -->
<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-outlined 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-outlined lp-icon-sm">add</span>
  </button>
</div>

<!-- Downward -->
<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-outlined 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-outlined lp-icon-sm">delete</span>
      </button>
    </div>
  </div>
</div>

<!-- Leftward -->
<div class="lp-fab-menu lp-fab-menu--left">
  <button class="lp-fab-menu-trigger lp-btn lp-btn--primary lp-btn--circle lp-btn--lg lp-shadow-lg">
    <span class="material-symbols-outlined 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-outlined lp-icon-sm">delete</span>
      </button>
    </div>
  </div>
</div>

<!-- Rightward — with labels below -->
<div class="lp-fab-menu lp-fab-menu--right">
  <button class="lp-fab-menu-trigger lp-btn lp-btn--dark lp-btn--circle lp-btn--lg lp-shadow-lg">
    <span class="material-symbols-outlined 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-bottom">
        <button class="lp-btn lp-btn--primary lp-btn--circle lp-shadow-md">
          <span class="material-symbols-outlined lp-icon-sm">image</span>
        </button>
        <span class="lp-label lp-label--soft-primary">Photo</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)