Uso
Cambios en este ejemplo: 0
<script lang="ts">
const count = signal(0)
</script>
<template>
<UIButton on:click="() => count.value++">Guardar cambios</UIButton>
<UIButton variant="outline">Cancelar</UIButton>
<UIButton size="sm" disabled>No disponible</UIButton>
<p role="status">Cambios: {count.value}</p>
</template>Ruta, enlace o botón
UIButton
pinta el elemento que corresponde a lo que hace, con el mismo aspecto: con
to, un enlace a una ruta de la aplicación que navega sin recargar; con
href, un
<a>
a cualquier URL; sin ninguno, un
<button type="button">.
<!-- Una ruta de la aplicación: navega sin recargar, con params y search tipados -->
<UIButton to="/links">Ver enlaces</UIButton>
<UIButton to="/users/[id]" bind:params="{ id: user.id }"
bind:search="{ tab: 'actividad' }">Perfil</UIButton>
<!-- Cualquier URL: un <a>; con target="_blank" añade rel="noopener noreferrer" -->
<UIButton href="https://github.com/meekojs/meeko" target="_blank"
variant="outline">GitHub</UIButton>
<UIButton href="/informe.pdf" download="informe.pdf">Descargar</UIButton>
<!-- Sin to ni href: un <button type="button"> -->
<UIButton type="submit" bind:disabled="saving.value">Guardar</UIButton>
<!-- id, title, aria-* y data-* llegan al elemento -->
<UIButton aria-describedby="hint" data-testid="reset" on:click="reset">Reiniciar</UIButton>
Las combinaciones sin sentido son errores de tipos en
meeko check
y en el editor:
to
con
href,
type
o
disabled
en un enlace,
target
en un botón, una ruta que no existe o una ruta dinámica sin
params. Un enlace no se puede deshabilitar: no tiene un estado nativo y
aria-disabled
sin quitar
href
seguiría navegando. Si la acción no está disponible, no pintes el enlace o usa un botón con
disabled.
Tamaños y estados
Peligro, carga e icono
tone="danger"
marca una acción destructiva.
loading
conserva el texto, añade el spinner, anuncia
aria-busy
e impide activarla sin quitarle el foco. Con
iconOnly, el botón es cuadrado: da siempre su nombre con
ariaLabel.
<UIButton tone="danger">Eliminar</UIButton>
<UIButton tone="danger" variant="outline">Revocar</UIButton>
<UIButton bind:loading="saving.value">Guardar</UIButton>
<UIButton iconOnly ariaLabel="Eliminar" variant="outline">
<UIIcon name="lucide:trash-2" />
</UIButton>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
to
|
RouteId
| Ruta de la aplicación. Pinta un enlace que navega sin recargar. Excluye href, type y disabled. |
params / search
|
parámetros de la ruta / objeto
| Con to: los parámetros de una ruta dinámica (obligatorios en ella) y la query string. |
href
|
string
| Cualquier URL. Pinta un <a>. Excluye to, type y disabled. |
target / rel / download
|
string
| Con href. Para _blank se añade noopener noreferrer cuando rel no está definido. |
type
|
button | submit | reset
button
| Sin to ni href. Comportamiento nativo en formularios. |
disabled
|
boolean
false
| Sin to ni href. Desactiva el botón nativo. |
variant
|
primary | secondary | outline | ghost
primary
| Jerarquía visual de la acción. |
size
|
sm | md | lg
md
| Tamaño del control. |
shape
|
rounded | pill
rounded
| Forma del contorno. |
tone
|
danger
| Marca una acción destructiva, con cualquier variante. |
loading
|
boolean
false
| Añade el spinner, anuncia aria-busy e impide activarla sin quitarle el foco. |
iconOnly / ariaLabel
|
boolean / string
false
| Botón cuadrado con un icono; ariaLabel le da su nombre accesible. |
name / value / form
|
string
| Sin to ni href. Los atributos nativos de un botón de envío. |
class
|
string
| Clases adicionales. |
id / title / aria-* / data-*
|
atributos HTML
| Llegan tal cual al elemento. |
Eventos y contenido
on:click
recibe el evento de ratón en las tres formas; en un enlace,
event.preventDefault()
cancela la navegación. El snippet
default
es obligatorio. Para una acción asíncrona, enlaza
loading
a tu señal.
Para un enlace con su propia jerarquía visual y los defaults de
ui.defaults.link, usa
UILink.