Botón

Un botón es aquello que una persona pulsa para que ocurra algo. button() dibuja un <button> de verdad con type="button", así que dejar uno dentro de un formulario no lo envía por accidente.

Botón básico

Por defecto es un botón sólido, primary y mediano. Los hijos son la etiqueta; todo lo demás es una prop.

stack({ direction: 'row', gap: 'md' },
  button('Uno'),
  button('Dos'),
  button('Tres'),
)

Variantes

Cinco niveles de énfasis, desde la única llamada a la acción de la página hasta algo que se lee como un enlace.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Colores

Todos los componentes con tema beben de las mismas cinco paletas, así que un botón color: 'danger' y una alerta color: 'danger' concuerdan sin que ninguno sepa del otro.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Tamaños

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Pequeño'),
  button({ size: 'md' }, 'Mediano'),
  button({ size: 'lg' }, 'Grande'),
)

Iconos

Pasa cualquier marcado SVG en startIcon o endIcon. Los iconos se dimensionan en em, así que escalan con el botón en vez de necesitar un tamaño propio.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Página nueva'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Continuar'),
)

Botón de icono

iconButton() es un botón cuadrado con un solo icono. Su label es obligatorio: pasa a ser el nombre accesible que el icono por sí solo no puede dar, y el tooltip al pasar por encima.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Añadir', icon: icon('plus') }),
  iconButton({ label: 'Editar', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Eliminar', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Cargando y deshabilitado

loading pone un spinner y activa aria-busy, dejando la etiqueta en su sitio para que el botón no cambie de ancho a mitad de la acción.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Guardando'),
  button({ variant: 'outline', loading: true }, 'Comprobando'),
  button({ disabled: true }, 'Deshabilitado'),
  button({ variant: 'soft', disabled: true }, 'Deshabilitado'),
)

Enlaces

Dale a un botón un href y dibujará un <a> en su lugar: el elemento correcto para algo que navega. Las anclas no tienen estado deshabilitado, así que disabled se convierte en aria-disabled y la saca del orden de tabulación.

Leer la documentación Componentes Enlace simple

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/es/docs' }, 'Leer la documentación'),
  button({ href: '/es/docs/ui', variant: 'outline' }, 'Componentes'),
  button({ href: '/es/docs', variant: 'link' }, 'Enlace simple'),
)

Ancho completo

button({ block: true, size: 'lg' }, 'Desplegar el sitio')

Props

Todo lo que no esté listado aquí cae al elemento renderizado como atributo: id, data-*, onclick, popovertarget y demás.

Prop	Tipo	Por defecto	Descripción
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Cuánto énfasis lleva el botón.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	De qué paleta bebe.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura, relleno y tamaño de la etiqueta.
`href`	`string`	—	Dibuja un <a> en vez de un <button>.
`startIcon`	`string`	—	Marcado colocado antes de la etiqueta.
`endIcon`	`string`	—	Marcado colocado después de la etiqueta.
`loading`	`boolean`	`false`	Muestra un spinner y activa aria-busy.
`disabled`	`boolean`	`false`	Deshabilita el botón, o marca un enlace como aria-disabled.
`block`	`boolean`	`false`	Se estira al ancho completo de su contenedor.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Solo para la forma <button>.

iconButton() admite las mismas props más un label obligatorio y un icon.