v0.11.0

Appearance

Button <button> ​

Buttons are used to trigger actions such as submitting forms, confirming dialogs, or navigating. They are the primary interactive control in any interface.

HTML tag<button>
⏣Native HTML
⬡Progressive
◇Custom
⬢Shadow DOM
Native HTML Element

Options ​

Sizes ​

Add data-size="sm", data-size="lg", or data-size="xl". Default is md. Only height and padding scale — the label stays 14px so a taller button reads as a larger touch target, not a louder label. For a larger label, override --font-size.

Code
html
<button
  class="l-button"
  data-size="sm"
>
  Button sm
</button>
<button class="l-button">Button md</button>
<button
  class="l-button"
  data-size="lg"
>
  Button lg
</button>
<button
  class="l-button"
  data-size="xl"
>
  Button xl
</button>

Primary ​

Add data-variant="primary".

Code
html
<button
  class="l-button"
  data-variant="primary"
>
  Primary
</button>
<button
  class="l-button"
  data-variant="primary"
  disabled
>
  Primary disabled
</button>

Destructive ​

Add data-variant="destructive".

Code
html
<button
  class="l-button"
  data-variant="destructive"
>
  Delete
</button>
<button
  class="l-button"
  data-variant="destructive"
  disabled
>
  Delete
</button>

Icon-only ​

Auto-detected when containing a single <svg>, <l-icon>, or <iconify-icon>.

Code
html
<button
  class="l-button"
  aria-label="Settings"
>
  <iconify-icon icon="lucide:settings"></iconify-icon>
</button>
<button
  class="l-button"
  data-variant="primary"
  aria-label="Add"
>
  <iconify-icon icon="lucide:plus"></iconify-icon>
</button>

Disabled ​

Native disabled attribute.

Code
html
<button
  class="l-button"
  disabled
>
  Disabled
</button>
<button
  class="l-button"
  data-variant="primary"
  disabled
>
  Disabled primary
</button>

Use an <a> element instead of <button>.

Link button Primary link
Code
html
<a
  class="l-button"
  href="#link"
  >Link button</a
>
<a
  class="l-button"
  data-variant="primary"
  href="#link"
  >Primary link</a
>

Press effect ​

Add data-press-effect attribute.

Code
html
<button
  class="l-button"
  data-press-effect
>
  Press me
</button>
<button
  class="l-button"
  data-variant="primary"
  data-press-effect
>
  Press me
</button>

Loading ​

Add an <l-spinner> inside the button. The spinner inherits the button's text color.

Code
html
<button
  class="l-button"
  disabled
>
  <l-spinner></l-spinner>
  Loading…
</button>
<button
  class="l-button"
  data-variant="primary"
  disabled
>
  <l-spinner></l-spinner>
  Loading…
</button>

Examples ​

With icon and text ​

Code
html
<button class="l-button">
  <iconify-icon icon="lucide:download"></iconify-icon>
  Download
</button>
<button
  class="l-button"
  data-variant="primary"
>
  <iconify-icon icon="lucide:send"></iconify-icon>
  Send
</button>

Button group ​

Wrap related buttons in <l-button-group> to join them into a single segmented control.

Code
html
<l-button-group label="Text formatting">
  <button
    class="l-button"
    aria-label="Bold"
  >
    <iconify-icon icon="lucide:bold"></iconify-icon>
  </button>
  <button
    class="l-button"
    aria-label="Italic"
  >
    <iconify-icon icon="lucide:italic"></iconify-icon>
  </button>
  <button
    class="l-button"
    aria-label="Underline"
  >
    <iconify-icon icon="lucide:underline"></iconify-icon>
  </button>
</l-button-group>

Form actions ​

Code
html
<div class="flex gap-2 justify-end">
  <button class="l-button">Cancel</button>
  <button
    class="l-button"
    data-variant="primary"
  >
    Save changes
  </button>
</div>

Accessibility ​

Criteria ​

Color

Text and background colors meet AA contrast ratios across all variants

WCAG1.4.3
RGAA3.2
Focus state

Visible 2px focus ring for keyboard users

WCAG2.4.72.4.11
RGAA10.7
Hover state

Clear visual change on hover

WCAG1.4.1
Active state

Visual feedback on press

WCAG1.4.1
Disabled state

Reduced opacity, cursor: not-allowed, not focusable when disabled

WCAG2.5.2
Icon-only

Icon-only buttons must have aria-label for an accessible name

WCAG1.1.14.1.2
RGAA1.1
Role

Uses native <button> or <a> — no extra ARIA role needed

WCAG4.1.2

Keyboard interactions ​

Enter
Activates the button
Space
Activates the button
Tab
Moves focus to the next focusable element
ShiftTab
Moves focus to the previous focusable element

API reference ​

Importing ​

css
@import 'luxen-ui/css/button';

Attributes & Properties ​

disabledAttribute
Disables the button.
commandAttribute
Invoker command (show-modal, close, show-popover, etc.).
commandforAttribute
ID of the target element for command.
data-variantprimary | destructiveAttribute
Visual variant. Default is the secondary style.
data-sizesm | lg | xlAttribute
Control size. Default is md.
data-icon-onlyAttribute
Icon-only mode (square button, width equals height). Auto-detected for a single icon child.
data-press-effectAttribute
Press effect (scale + translate on active).

CSS classes ​

.l-buttonClass
Base button style.

CSS custom properties ​

--heightdefault:32pxCustom property
Button height (md size).
--padding-inlinedefault:0.625remCustom property
Horizontal padding.
--background-colorCustom property
Background color.
--background-color-hoverCustom property
Background color on hover.
--background-color-activeCustom property
Background color on press.
--text-colorCustom property
Text color.
--text-color-hoverCustom property
Text color on hover.
--border-colorCustom property
Border color.
--border-color-hoverCustom property
Border color on hover.
--font-sizedefault:0.875remCustom property
Label font size. Stays 14px across all sizes; override to opt into a larger label.