BetaBeta pública — Consulta las notas de lanzamiento
Solidiom
Comenzar
Documentación

Button

Ejemplos de botón estándar, botón de icono, botón de alternancia y grupo de botones.

Paquete
@solidiom/button
Versión
0.0.1-next.0
Estado
stable

Ejemplos

El ejemplo interactivo demuestra las cuatro partes de Button: un botón de acción estándar con estado de carga al hacer clic, un ToggleButton que mantiene estado presionado y un ButtonGroup. Presiona Enter o Space con el foco en cualquier botón para activarlo. El estado de carga deshabilita el botón y establece aria-busy="true" durante 1.2 segundos.

import * as Button from "@solidiom/button"

;<Button.Root onClick={() => alert("clickeado")}>Haz clic</Button.Root>

Con estado de carga

Usa el prop loading para indicar una acción en proceso. El botón se deshabilita automáticamente y se marca con aria-busy="true".

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

IconButton

Usa IconButton para botones solo con icono. Requiere aria-label para accesibilidad y envuelve el contenido del icono con aria-hidden="true".

;<Button.IconButton aria-label="Eliminar elemento">
  <TrashIcon />
</Button.IconButton>

ToggleButton

Usa ToggleButton para acciones alternables como negrita o cursiva.

import { createSignal } from "solid-js"

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

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

ButtonGroup

Usa ButtonGroup para agrupar visualmente botones relacionados.

;<Button.ButtonGroup orientation="horizontal">
  <Button.Root>Borrador</Button.Root>
  <Button.Root>Vista previa</Button.Root>
  <Button.Root>Publicar</Button.Root>
</Button.ButtonGroup>
Ver código fuente
        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>
  )
}