Skip to content
ActionBrowse action components
ComponentsActionStable

Button group

Adjacent buttons with shared borders and isolation, perfect for segmented filter controls.

Live preview

Usage

Adapters:React stableVue stable
index.html
<div class="lm-btn-group" role="group" aria-label="Time range">
  <button class="lm-btn">Day</button>
  <button class="lm-btn" aria-pressed="true">Week</button>
  <button class="lm-btn">Month</button>
</div>

CSS classes (1)

ClassDescription
lm-btn-groupInline-flex wrapper that joins .lm-btn children

React props (1)

PropTypeDefaultDescription
orientationhorizontal | verticalhorizontalStack direction

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.