ActionBrowse action components
Button
Primary action primitive with 8 variants, 5 sizes, loading, pressed, icon, and block states. Subtle gradient + glow on focus.
Live preview
Variants & states
Variants
Sizes
States
Group
Usage
Adapters:React stableVue stable
index.html
<button class="lm-btn lm-btn-primary lm-btn-md" type="button">
Save changes
</button>
<button class="lm-btn lm-btn-primary" aria-busy="true">
Saving…
</button>CSS classes (7)
| Class | Description |
|---|---|
lm-btn | Base class — required on every button |
lm-btn-{variant} | primary | secondary | accent | success | warning | danger | info | outline | ghost | link |
lm-btn-{size} | xs | sm | md | lg | xl |
lm-btn-icon | Square icon-only button |
lm-btn-block | Full-width button |
lm-btn-loading | Show inline spinner; pairs with aria-busy |
lm-btn-group | Wrapper for adjacent buttons with shared borders |
React props (7)
| Prop | Type | Default | Description |
|---|---|---|---|
variant | Variant | default | Visual emphasis |
size | Size | md | xs / sm / md / lg / xl |
loading | boolean | false | Adds spinner + sets aria-busy |
pressed | boolean | — | Toggle pressed state via aria-pressed |
iconOnly | boolean | — | Square padding for icon-only |
block | boolean | — | Full-width |
as | ElementType | button | Render as <a>, <Link>, etc. |
Accessibility
- Use native <button> for actions, <a> for links.
- Set type='button' inside forms to avoid accidental submits.
- Use aria-busy='true' during async actions; aria-pressed for toggles.
- Disabled state uses :disabled or aria-disabled='true'.
Spotted something wrong? Edit this entry on GitHub.