Librería de componentes 🚀

Esta librería está realizada con React versión 18.2.0 React.

Aquí podrás encontrar los componentes reutilizables, testeados , que necesites para realizar proyectos retadores.

Los componentes están basados en un Design System (UI Kit)

Como usar los componentes

Componentes:

Button Component

Este componente permite tener un boton personalizado.

import logo from "/logo.svg";
import { Button } from "@dairocantillo/react-system-design";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Button title="Button" icon={logo} />
    </div>
  );
}

export default App;

Revisa su funcionamiento en storybook.

Valores de entrada

• customClass: string: Clase CSS personalizada para el botón.
• disabled: boolean: Indica si el botón está deshabilitado.
• title: string: Te permite darle un nombre al botón.
• theme: string: Tema del botón (dark, light, dark-white).
• type: string: Tipo del botón (primary, secondary, tertiary).
• size: string: Tamaño del botón (medium, small).
• icon: string: Url del icono que va dentro del botón.
• altIcon: string: etiqueta alt para el img que contiene el icono (solo es necesario si se le está pasando un icon.
• iconType: string: Posición del icono que acompaña el botón (solo es necesario si se le está pasando un icon).
• font : string: Te permite darle una fuente a las letras, puedes enviar la fuente que deseas(Poppins-Regular, Poppins-SemiBold, Poppins-Bold,etc).
• | Prop | Default | Tipo | | ----------- | ------------ | ------- | | customClass | "" | string | | disabled | false | boolean | | title | undefined | string | | theme | "dark" | string | | type | "primary" | string | | size | "medium" | string | | icon | undefined | string | | altIcon | "ButtonIcon" | string | | iconType | "right" | string | | font | "" | string |

Valores de salida

• onClick:Evento emitido por el componente.