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

⬡Progressive

◇Plain

⬢Shadow-DOM

Native 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>

As link

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 unit.

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

Rules

• Use a native <button> element — never a <div> or <span>
• Always add aria-label to icon-only buttons
• Include type="button" to prevent form submission (except for submit buttons)
• When using <a> as a link button, add role="button" only if it triggers an action rather than navigating

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:36pxCustom 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.