abaabil.button

abaabil.button

A customizable button component for React with various styles and sizes.

Installation

npm install abaabil.button

Usage

import React from 'react';
import Button from 'abaabil.button';

function MyApp() {
  return (
    <Button
      size="medium"
      text="Click me"
      type="button"
      variant="primary"
      iconName="myIcon"
      style={{ color: 'red' }}
      onClick={() => console.log('clicked')}
      disabled={false}
      className="my-button"
      ariaPressed={false}
    />
  );
}

Props

• size (string, default: medium): Size of the button.
  • small: Smaller button with reduced padding and font size.
  • medium: Regular sized button.
  • large: Larger button with increased padding and font size.
• text (string): Text to display inside the button.
• type (string, default: button): HTML button type attribute. Options are:
  • button
  • submit
  • reset
• variant (string, default: primary): Style variant of the button. Options include:
  • primary: Primary color scheme button.
  • secondary: Secondary color scheme button.
  • success: Indicates success with a green color scheme.
  • warning: Indicates caution with a yellow color scheme.
  • danger: Indicates danger or a negative action with a red color scheme.
  • info: Informational, typically displayed with a blue color scheme.
• iconName (string): Name of the icon from abaabil.icon.
• style (object): Inline styles for the button element.
• onClick (function): Handler function to be called when the button is clicked.
• disabled (boolean, default: false): Disable the button when true.
• className (string): Additional CSS class name(s) to be applied.
• ariaPressed (boolean, default: false): ARIA pressed state.

Example with all props

import React from 'react';
import Button from 'abaabil.button';

function MyApp() {
  return (
    <>
      <Button
        size="medium"
        text="Click me"
        type="button"
        variant="primary"
        iconName="myIcon"
        style={{ color: 'red' }}
        onClick={() => console.log('clicked')}
        disabled={false}
        className="my-button"
        ariaPressed={false}
      />

      <Button
        size="small"
        text="Click me"
        type="submit"
        variant="secondary"
        iconName="myIcon"
        style={{ color: 'red' }}
        onClick={() => console.log('clicked')}
        disabled={false}
        className="my-button"
        ariaPressed={false}
      />

      <Button
        size="large"
        text="Click me"
        type="reset"
        variant="success"
        iconName="myIcon"
        style={{ color: 'red' }}
        onClick={() => console.log('clicked')}
        disabled={false}
        className="my-button"
        ariaPressed={false}
      />
    </>
  );
}

License

MIT