Button

El componente Button es un componente versátil que representa un botón interactivo. Puede renderizarse como un elemento "button" o como un contenedor "div", y proporciona varias opciones de personalización, incluyendo tamaño, icono y estado de carga.

Ejemplo

Importacion

Para importar el componente Button, se puede hacer desde fenextjs o fenextjs-component

import { Button, ButtonProps } from "fenextjs/cjs/component/Button";

import { Button, ButtonProps } from "fenextjs-component/cjs/Button";

Parametros

Parametro	Tipo	Requerido	Default	Descripcion
loader	boolean	no	false	Si el componente esta en estado loader, con un indicardor de spiner y deshabilitada su funcionalidad
disabled	boolean	no	false	Si el componente esta en estado disabled, por ende se deshabilita su funcionalidad
onClick	function	no		Funcion que se ejecuta por onClick en el componente, (solo se ejecuta si loader y disabled son false)
icon	ReactNode	no	""	Icono del componente
children	ReactNode	no		Contenido del componente
isBtn	boolean	no	true	Si es false se usara la etiquera "div" y no la "button"
size	"extra-small"\| "small" \|"normal" \|"strong" \|"extra-strong"	no	"normal"	Tamaño del bottom, es posible personalizar los tamaños
full	boolean	no	false	Si es true el botton tendra width:100%
className	string	no	""	Clase personalizada del componente
classNameLoader	string	no	""	Clase personalizada del loader

Storybook

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

Usos

Uso básico del componente Button

const handleButtonClick = () => {
  console.log("Button clicked!");
};
<Button onClick={handleButtonClick}>Click Me</Button>;

Button con clase de estilo personalizada

<Button className="custom-button">Custom Button</Button>

Button con loadding

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

Button deshabilitado

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

Button como un contenedor "div"

<Button isBtn={false}>Div Button</Button>

Button con tamaño personalizado

<Button size="extra-strong">Extra Strong Button</Button>

Button a lo ancho

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

Breadcrumb Chronological List