Todos los componentes (204)

Botón de icono

Acciones · IconButton

Qué es y cuándo usarlo

Un botón que solo lleva un icono: los tres puntos de una fila, la equis de un panel, el más de «añadir». Es un <button> nativo cuadrado (mide lo mismo de ancho que de alto) y, si no se dice otra cosa, ghost y neutro. Admite el aspecto de Button (variant, tone, size) y shape (default, pill o circle), pero no startIcon, endIcon ni fullWidth: el icono es el contenido y el botón es cuadrado.

Cuándo usarlo

Acciones que se repiten mucho y se reconocen por el icono, donde el texto se comería el sitio: cerrar, copiar, más acciones.
Varios seguidos dentro de una Toolbar, que los deja en una sola parada del Tab.

Cuándo no

Si el icono no se entiende solo, lleva texto: Button con startIcon.
Si lleva a otra página, es un enlace: ButtonLink.
Para abrir un menú de acciones: ActionMenu, que ya trae su botón de tres puntos.

Teclado: Tab llega a él; Intro y Espacio lo pulsan. Con disabled sale del orden del Tab.

Accesibilidad: aria-label es obligatorio por tipos: sin texto visible, es el único nombre del botón para el lector de pantalla y para el control por voz. Que diga la acción y sobre qué («Cerrar el panel del pedido»), no el dibujo («Equis»). Con el dedo, no baja de 44 × 44 px.

Aspecto fino: las variables --amset-button-* de Button; --amset-button-icon es el tamaño del icono y --amset-button-height, el del botón.

Cómo se ve

<IconButton aria-label="Ver el carrito"><CartIcon /></IconButton>
<IconButton aria-label="Nuevo producto" variant="solid" shape="circle"><MoreIcon /></IconButton>
<IconButton aria-label="Quitar del pedido" tone="error" variant="soft"><CrossIcon /></IconButton>

Props

Se importa con import { IconButton } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`aria-label`obligatoria	`string`	Obligatoria: sin texto visible, el nombre lo pone esto.
`children`obligatoria	`ReactNode`	El icono. Es lo único que se ve.
`className`	`string`	—
`disabled`	`boolean`	Fuera de juego: ni se pulsa, ni se enfoca, ni entra en la tabulacion.
`excludeFromTabOrder`	`boolean`	Fuera de la tabulacion pero pulsable. Para un boton que duplica algo que ya esta en ella: el de abrir la lista de un buscador, que no hace nada que no haga la flecha de abajo.
`fullWidth`	`boolean`	Ocupa todo el ancho disponible, con el icono en el centro.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—
`onPress`	`PressHandler`	—
`shape`	`"circle" \| "default" \| "pill"`	La forma: `default` (por defecto), `pill` o `circle`, el boton redondo de solo icono.
`size`	`"sm" \| "md" \| "lg"`	—
`style`	`CSSProperties`	Estilo en linea. El aspecto estable va en las variables CSS `--amset-button-*`, que es lo que se mantiene; esto es para lo que solo se sabe en tiempo de ejecucion: un color que elige quien usa la aplicacion, una posicion calculada, un alto que depende del contenido. Estuvo prohibido y hubo que abrirlo: un front real lo usaba en 40 botones para calcular su halo a partir de un color arbitrario (AMS-735), y sin esto la unica salida era escribir CSS a mano contra nuestras clases.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Que quiere decir. Sin el, un boton solido o suave es de `accent` (la accion principal) y uno de contorno o fantasma es `neutral`. `error` es el de borrar o dar de baja.
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	Como se pinta: `ghost` (por defecto), `solid`, `soft` o `outline`.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: