Button

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

Botón o enlace con forma de botón para landings y páginas de marca; el primario neón se presiona 3 px hacia abajo.

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

Ejemplos

Enlace primario y secundario

tema oscuro

arcade claro

Botón deshabilitado

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)
`aria-describedby`	`string`	—
`aria-label`	`string`	—
`children` (obligatoria)	`ReactNode`	—	Visible text from the consumer: an infinitive verb («Descargar Spawn»).
`className`	`string`	—
`disabled`	`boolean`	`false`	Native disabled `<button>`; a link cannot be disabled.
`download`	`boolean \| string`	—	With `href`: download the target instead of opening it.
`href`	`string`	—	Renders a link (`<a href>`) styled as a button: use it for navigation and downloads.
`id`	`string`	—
`onClick`	`MouseEventHandler<HTMLElement>`	—
`ref`	`Ref<HTMLAnchorElement \| HTMLButtonElement>`	—
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native type of the `<button>`; ignored with `href`.
`variant`	`'primary' \| 'secondary'`	`'secondary'`	Visual weight. `primary` is the pressable neon button of the page's main action.

Para la llamada principal de una landing o una página de producto: «Descargar Spawn».
Con href se renderiza un enlace: úsalo para navegar y descargar. Sin href es un botón.
Un primario por página; el primario se presiona 3 px hacia abajo, salvo con movimiento reducido.