Button

experimentalLa API puede cambiar sin una versión mayor. Desde la versión 0.1.0.

Botón de acción de las interfaces de producto: secundario por defecto; el primario neón presionable es la acción principal de la pantalla.

import { Button } from '@pipepath/product-ui';

Ejemplos

Secundario y primario

tema oscuro

arcade claro

Tamaño compacto, con ícono

tema oscuro

arcade claro

Deshabilitado y en espera

tema oscuro

arcade claro

Props de Button, leídas de sus tipos de TypeScript
Prop	Tipo	Por defecto	Descripción (en inglés, desde el código)
`children` (obligatoria)	`ReactNode`	—	Visible text, always from the consumer: an infinitive verb («Crear túnel»).
`className`	`string`	—
`disabled`	`boolean`	`false`	Not focusable and not pressable. Say why next to it when it is not obvious.
`icon`	`IconName`	—	Decorative icon before the text, from `@pipepath/icons`.
`onPress`	`() => void`	—	Called on mouse, touch, keyboard (Enter, Space) and screen reader activation.
`pending`	`boolean`	`false`	Busy: keeps focus, ignores presses and tells screen readers it is loading.
`ref`	`Ref<HTMLButtonElement>`	—
`size`	`'md' \| 'sm'`	`'md'`	`sm` for dense rows and toolbars.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`variant`	`'primary' \| 'secondary'`	`'secondary'`	Visual weight. `primary` is the pressable neon button of the screen's main action: one per screen.

Para una acción en la pantalla actual: crear un túnel, copiar una dirección, guardar.
El primario es la acción principal de la pantalla y hay uno solo; el resto son secundarios.
Usa pending mientras la acción corre: el botón conserva el foco y los lectores de pantalla oyen «cargando».

Para navegar a otra página: usa un enlace.
Para elegir entre opciones o activar un ajuste: espera el componente que lo resuelva, no lo simules con botones.
No lo deshabilites sin decir por qué: explica junto al botón qué falta.

Verbo en infinitivo que dice exactamente lo que hace: «Crear túnel», «Copiar dirección». El texto siempre lo pones tú; el ícono es decorativo.