Button

El componente Button es un botón interactivo que puede ser configurado para mostrar íconos, estar en estado de carga (loader), deshabilitarse y adaptarse a diferentes tamaños. Permite a los usuarios interactuar con la aplicación ejecutando acciones al hacer clic.

Ejemplo

Importación

Para importar el componente Button, se puede hacer desde fenextjs

import { Button } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
loader	boolean	no	false	Si el botón está en estado de carga, mostrando un indicador de carga (spinner) y deshabilitado para otras acciones.
disabled	boolean	no	false	Si el botón está deshabilitado, impidiendo cualquier interacción.
onClick	function	no		Función que se ejecuta cuando se hace click en el botón (solo si no está deshabilitado o en estado de carga).
onClickDisabled	function	no		Función que se ejecuta cuando se hace click en el botón estando deshabilitado.
icon	ReactNode	no	undefined	El ícono que se mostrará dentro del botón.
isBtn	boolean	no	true	Si se renderiza el componente como un botón (`\<button\>`) o como un `\<div\>`.
size	"extra-small" \| "small" \| "normal" \| "strong" \| "extra-strong"	no	"normal"	El tamaño del botón.
full	boolean	no	false	Si el botón debe ocupar todo el ancho disponible.
className	string	no	""	Clase personalizada para el componente Button.
classNameLoader	string	no	""	Clase personalizada para el componente Loader dentro del botón cuando está en estado de carga.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Botón básico

<Button>Click me</Button>

Botón con ícono

<Button icon={<img src="/icon.svg" alt="Icon" />}>Click me</Button>

Botón en estado de carga

<Button loader={true}>Loading...</Button>

Botón deshabilitado

<Button disabled={true}>Disabled</Button>

Botón con tamaño personalizado

<Button size="strong">Strong Button</Button>

Botón con ancho completo

<Button full={true}>Full Width Button</Button>

Breadcrumb Chronologicallist