Buttons — Lumora

Living Documentation

A complete button catalog with variant matrix, state modeling and a live interaction playground

This first UI Basic page defines reusable button patterns for the whole admin panel. Explore solid, outline, soft and ghost styles, test states, inspect compositional usage, and generate copy-ready markup from the playground controls.

Variant matrix Live controls Focus and disabled states Real app usage snippets

Catalog Blocks 6 Variants, size, state, composition, snippets, playground

Button Styles 4 Solid, Outline, Soft, Ghost

Intent Palette 6 Primary, Secondary, Success, Warning, Danger, Info

Preview State Default Updates from live control toggles

1. Variant Matrix

Full matrix for each style and semantic intent

Solid

Outline

Soft

Ghost

2. Interaction Playground

Generate a live button recipe from state toggles

Style

Intent

Size

Disabled

Full width

Icon on right

Pill shape

Live Output

solid primary

3. Size and Shape

Scale and geometry standards for action density

Size Scale

Icon + Label

Shape Variations

4. State Modeling

Recommended visual and functional states

Interactive

Disabled

5. Composition Patterns

Buttons in context: toolbars, segmented controls and split actions

Toolbar

Segmented Group

Weekly Monthly Quarterly

Split Action

6. Real-use Snippets

Copy-ready snippets for forms, tables and card-level actions

Form Submit Row

<div class="d-flex gap-2">
  <button class="btn btn-outline-secondary" type="button">Cancel</button>
  <button class="btn btn-primary" type="submit">
    <i class="fa-solid fa-floppy-disk"></i> Save Changes
  </button>
</div>

Table Action Cluster

<div class="btn-group" role="group" aria-label="Row actions">
  <button class="btn btn-soft btn-soft--info btn-sm">View</button>
  <button class="btn btn-soft btn-sm">Edit</button>
  <button class="btn btn-soft btn-soft--danger btn-sm">Delete</button>
</div>

Card Header Actions

<div class="d-flex align-items-center justify-content-between">
  <h5 class="mb-0">Service Health</h5>
  <div class="d-flex gap-2">
    <button class="btn btn-outline-secondary btn-sm">Refresh</button>
    <button class="btn btn-primary btn-sm">Open Details</button>
  </div>
</div>