BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Button

Standard button, icon button, toggle button, and button group examples.

Package
@solidiom/button
Version
0.0.1-next.0
Status
stable

Examples

The live example demonstrates all four Button parts: a standard action button with a loading state on click, a ToggleButton that maintains pressed state, and a ButtonGroup. Press Enter or Space while focused on any button to activate it. The loading state disables the button and sets aria-busy="true" for 1.2 seconds.

import * as Button from "@solidiom/button"

;<Button.Root onClick={() => alert("clicked")}>Click me</Button.Root>

With loading state

Use the loading prop to indicate an in-progress action. The button is automatically disabled and marked with aria-busy="true".

;<Button.Root loading>Saving...</Button.Root>

IconButton

Use IconButton for icon-only buttons. It requires aria-label for accessibility and wraps the icon content with aria-hidden="true".

;<Button.IconButton aria-label="Delete item">
  <TrashIcon />
</Button.IconButton>

ToggleButton

Use ToggleButton for toggleable actions like bold or italic formatting.

import { createSignal } from "solid-js"

const ToggleExample = () => {
  const [pressed, setPressed] = createSignal(false)

  return (
    <Button.ToggleButton pressed={pressed()} onPressedChange={setPressed}>
      Bold
    </Button.ToggleButton>
  )
}

ButtonGroup

Use ButtonGroup to visually group related buttons together.

;<Button.ButtonGroup orientation="horizontal">
  <Button.Root>Draft</Button.Root>
  <Button.Root>Preview</Button.Root>
  <Button.Root>Publish</Button.Root>
</Button.ButtonGroup>
View source
        export function ButtonExample(props: ButtonExampleProps) {
  const copy = () => COPY[props.locale]
  const [pressed, setPressed] = createSignal(false)
  const [loading, setLoading] = createSignal(false)

  const handleClick = () => {
    setLoading(true)
    setTimeout(() => setLoading(false), 1200)
  }

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="button-example"
      data-button-example
    >
      <div class="button-example__row">
        <Button.Root onClick={handleClick} loading={loading()}>
          {loading() ? copy().loading : copy().action}
        </Button.Root>
      </div>

      <div class="button-example__row">
        <Button.ToggleButton pressed={pressed()} onPressedChange={setPressed}>
          {copy().toggle}
        </Button.ToggleButton>
      </div>

      <div class="button-example__row">
        <Button.ButtonGroup orientation="horizontal">
          <Button.Root>{copy().groupDraft}</Button.Root>
          <Button.Root>{copy().groupPreview}</Button.Root>
          <Button.Root>{copy().groupPublish}</Button.Root>
        </Button.ButtonGroup>
      </div>
    </div>
  )
}