@dairocantillo/react-system-design v1.9.0

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.