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.

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

Code

HTML

<div
  role="group"
  aria-label="Text formatting"
  class="flex gap-0"
>
  <button
    class="l-button rounded-none border-r-0"
    aria-label="Bold"
  >
    <iconify-icon icon="lucide:bold"></iconify-icon>
  </button>
  <button
    class="l-button rounded-none border-r-0"
    aria-label="Italic"
  >
    <iconify-icon icon="lucide:italic"></iconify-icon>
  </button>
  <button
    class="l-button rounded-none"
    aria-label="Underline"
  >
    <iconify-icon icon="lucide:underline"></iconify-icon>
  </button>
</div>

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

Visual variant (primary, destructive)

data-sizeAttribute

Size (sm, lg, xl). Default is md.

data-icon-onlyAttribute

Icon-only mode (square button, width equals height)

data-press-effectAttribute

Press effect (scale + translate on active)

CSS classes

.l-buttonClass

Base button style

CSS custom properties

--heightName

Button height

--padding-inlineName

Horizontal padding

--background-colorName

Background color

--background-color-hoverName

Background on hover

--background-color-activeName

Background on press

--text-colorName

Text color

--text-color-hoverName

Text color on hover

--border-colorName

Border color

--border-color-hoverName

Border color on hover

--font-sizeName

Font size