Todos los componentes (204)

Acción de texto

Acciones · TextButton · .amset-textbutton

Qué es y cuándo usarlo

Una acción con aspecto de enlace que va dentro de una frase: «Esta asignatura no está en este aparato. Vuelve a tus descargas.», «Si la cambias, se pierde el borrador. Dejarlo». Es un <button> de verdad con el aspecto y los tonos de Link, sin la caja ni el relleno de Button.

Cuándo usarlo

Para algo que cambia de estado, no de sitio, y que se lee como parte de una frase: deshacer, reintentar, volver a enviar, dejarlo.
tone="ink" dentro de una tabla o una lista; tone="error" para lo que descarta o borra.

Cuándo no

Para ir a otro sitio: es un Link. Si cambia de sitio, enlace; si cambia de estado, botón.
Para la acción principal de una pantalla o de un formulario: es un Button. Una acción de texto no se ve como la que hay que pulsar.
Para un texto largo: un <button> es siempre una caja en línea y no se parte en dos renglones. Que sean dos o tres palabras.

Teclado: Tab llega a él; Intro y Espacio lo activan, a diferencia de un enlace, que solo responde a Intro. Eso es lo que oye quien usa un lector: «botón», no «enlace».

Accesibilidad: viene subrayado y en negrita por la misma razón que Link: dentro de un párrafo el color no puede ser lo único que lo distinga (WCAG 1.4.1). Hereda el tamaño y la altura de línea del texto, así que no descuadra la frase; en pantallas táctiles el objetivo de pulsación crece hasta 44 px sin mover el texto. Por defecto es type="button": un botón nativo dentro de un formulario lo envía. Mientras loading sigue enfocable (aria-disabled) pero no responde.

Aspecto fino: --amset-textbutton-color y --amset-textbutton-offset.

Cómo se ve

No se pudieron cargar los pedidos.

<p>
  No se pudieron cargar los pedidos.{" "}
  <TextButton tone="accent" onPress={reintentar}>Reintentar</TextButton>
</p>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Apagado: sale de la tabulación y no responde.
`loading`	`boolean`	Mientras envía: sigue enfocable (`aria-disabled`) pero no hace nada, y no envía un formulario dos veces.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—
`onPress`	`PressHandler`	—
`ref`	`Ref<HTMLButtonElement>`	El nodo del `<button>`, para quien lo monta.
`tone`	`"accent" \| "secondary" \| "tertiary" \| "error" \| "ink"`	Los mismos tonos que `Link`: `accent` por defecto, `ink` dentro de una tabla o una lista.
`type`	`"button" \| "submit" \| "reset"`	Por defecto `button`: un `<button>` nativo dentro de un formulario envía el formulario.
`underline`	`LinkUnderline`	Por defecto `always`: dentro de una frase el color no basta para ver que se pulsa (WCAG 1.4.1). `hover` lo pone al posar el ratón y `none` lo quita, para una acción que no va en mitad de un texto.

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-textbutton-color`	`var(--amset-accent-text)`
`--amset-textbutton-offset`	`0.15em`

Cómo se cambia

.amset-textbutton {
  --amset-textbutton-color: ...;
  --amset-textbutton-offset: ...;
}

En el banco de pruebas

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