elementsbutton

Button

Button component with polymorphic rendering and automatic loading state.

Import#

import { Button } from 'moraine'

Slot Structure#

Trigger element with optional leading and trailing icon slots.

root
├── leading (Icon, optional)
├── label (optional)
└── trailing (Icon, optional)

Examples#

Variants#

Visual variants for primary, secondary, subtle, and destructive actions.

1
function Variants() {
2
  const VARIANTS: ButtonT.Variant['variant'][] = [
3
    'default',
4
    'secondary',
5
    'outline',
6
    'ghost',
7
    'link',
8
    'destructive',
9
  ]
10

11
  return (
12
    <div class="flex flex-wrap gap-3">
13
      <For each={VARIANTS}>{(variant) => <Button variant={variant}>{variant}</Button>}</For>
14
    </div>
15
  )
16
}

Sizes#

Text button sizes with a leading icon to preview label and icon spacing.

1
function Sizes() {
2
  const SIZES: ButtonT.Variant['size'][] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  return (
5
    <div class="flex flex-wrap gap-3 items-center">
6
      <For each={SIZES}>
7
        {(size) => (
8
          <Button size={size} variant="outline" leading="i-lucide:plus">
9
            Add item ({size})
10
          </Button>
11
        )}
12
      </For>
13
    </div>
14
  )
15
}

Loading States#

Controlled loading and async auto-loading from click handlers.

1
function LoadingStates() {
2
  const [controlledLoading, setControlledLoading] = createSignal(false)
3
  const [customLoading, setCustomLoading] = createSignal(false)
4
  const [autoRuns, setAutoRuns] = createSignal(0)
5

6
  const runControlledLoading = async () => {
7
    setControlledLoading(true)
8
    await wait(1000)
9
    setControlledLoading(false)
10
  }
11

12
  const runCustomLoading = async () => {
13
    setCustomLoading(true)
14
    await wait(1200)
15
    setCustomLoading(false)
16
  }
17

18
  return (
19
    <div class="flex flex-wrap gap-3 items-center">
20
      <Button
21
        loading={controlledLoading()}
22
        onClick={runControlledLoading}
23
        leading="i-lucide:download"
24
      >
25
        {controlledLoading() ? 'Downloading...' : 'Download report'}
26
      </Button>
27

28
      <Button
29
        loading={customLoading()}
30
        loadingIcon="i-lucide:loader-circle"
31
        variant="outline"
32
        onClick={runCustomLoading}
33
      >
34
        {customLoading() ? 'Syncing...' : 'Sync workspace'}
35
      </Button>
36

37
      <Button
38
        loadingAuto
39
        variant="outline"
40
        leading="i-lucide:send"
41
        onClick={() => {
42
          return wait(2000).then(() => {
43
            setAutoRuns((value) => value + 1)
44
          })
45
        }}
46
      >
47
        Send invite ({autoRuns()})
48
      </Button>
49

50
      <Button disabled variant="ghost">
51
        Archive project
52
      </Button>
53
    </div>
54
  )
55
}

Loading Placement#

When loading, the icon replaces leading first. If no leading is set, it replaces trailing.

1
function LoadingPlacement() {
2
  return (
3
    <div class="flex flex-wrap gap-3 items-center">
4
      <Button loading>Creating project</Button>
5
      <Button loading trailing="i-lucide:timer">
6
        Scheduling publish
7
      </Button>
8
      <Button loading leading="i-lucide:download" trailing="i-lucide:arrow-right">
9
        Preparing download
10
      </Button>
11
    </div>
12
  )
13
}

Icon Buttons#

Icon-only sizes using decrease and increase actions. Always provide an accessible label when a button has no visible text.

1
function IconButtons() {
2
  const ICON_SIZES: NonNullable<ButtonT.Variant['size']>[] = [
3
    'icon-xs',
4
    'icon-sm',
5
    'icon-md',
6
    'icon-lg',
7
    'icon-xl',
8
  ]
9

10
  return (
11
    <div class="flex flex-wrap gap-4 items-center">
12
      <For each={ICON_SIZES}>
13
        {(size) => (
14
          <div class="flex gap-1.5 items-center">
15
            <Button size={size} variant="outline" aria-label={`Decrease, ${size} button`}>
16
              <Icon name="i-lucide:minus" />
17
            </Button>
18
            <Button size={size} variant="outline" aria-label={`Increase, ${size} button`}>
19
              <Icon name="i-lucide:plus" />
20
            </Button>
21
          </div>
22
        )}
23
      </For>
24
    </div>
25
  )
26
}

Polymorphic#

Anchor rendering support via the polymorphic as prop.

1
function Polymorphic() {
2
  return (
3
    <div class="flex flex-wrap gap-3 items-center">
4
      <Button as="a" href="https://www.solidjs.com" target="_blank" rel="noreferrer" variant="link">
5
        SolidJS docs
6
      </Button>
7
      <Button
8
        as="a"
9
        href="https://kobalte.dev"
10
        target="_blank"
11
        rel="noreferrer"
12
        variant="secondary"
13
      >
14
        Kobalte
15
      </Button>
16
    </div>
17
  )
18
}

API Reference#

Attributes#

Slotroot0 attributes

Interactive button element, or the polymorphic element provided through `as`.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
as	`"button" \| undefined`	`button`	Element or component to render as.
children	`ComponentOrElement<{ loading: boolean; }> \| undefined`	—	Children of the button. Supports render function form.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`ButtonT.Classes \| undefined`	—	—
disabled	`boolean \| undefined`	—	Disabled state, including for non-button polymorphic roots.
leading	`IconT.Name`	—	Leading visual content, usually an icon.
loading	`boolean \| undefined`	`false`	Controlled loading state.
loadingAuto	`boolean \| undefined`	`false`	Auto toggles loading while async click handlers are pending.
loadingIcon	`IconT.Name`	`icon-loading`	Optional icon shown when `loading` is active.
onClick	`JSX.EventHandlerUnion<ElementFor<"button">, MouseEvent> \| undefined`	—	—
onContextMenu	`JSX.EventHandlerUnion<ElementFor<"button">, MouseEvent> \| undefined`	—	—
onKeyDown	`JSX.EventHandlerUnion<ElementFor<"button">, KeyboardEvent> \| undefined`	—	—
onPointerCancel	`JSX.EventHandlerUnion<ElementFor<"button">, PointerEvent> \| undefined`	—	—
onPointerDown	`JSX.EventHandlerUnion<ElementFor<"button">, PointerEvent> \| undefined`	—	—
onPointerLeave	`JSX.EventHandlerUnion<ElementFor<"button">, PointerEvent> \| undefined`	—	—
onPointerUp	`JSX.EventHandlerUnion<ElementFor<"button">, PointerEvent> \| undefined`	—	—
ref	`JSX.HTMLElementTags["button"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "icon-xs" \| "icon-sm" \| "icon-md" \| "icon-lg" \| "icon-xl" \| undefined`	—	—
slotName	`string \| undefined`	—	Root `data-slot` name
style	`JSX.CSSProperties \| undefined`	—	—
styles	`ButtonT.Styles \| undefined`	—	—
trailing	`IconT.Name`	—	Trailing visual content, usually an icon.
type	`"button" extends "a" ? JSX.AnchorHTMLAttributes<HTMLAnchorElement>["type"] : "button" extends "button" ? JSX.ButtonHTMLAttributes<HTMLButtonElement>["type"] : "button" extends "input" ? JSX.InputHTMLAttributes<HTMLInputElement>["type"] : never \| undefined`	—	Native type attribute for supported native roots.
variant	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| undefined`	—	—