Elementswift.button NPM

elementswift.button

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

Installation

npm install elementswift.button

Usage

import React from 'react';
import Button from 'elementswift.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 elementswift.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 'elementswift.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}
      />
    </>
  );
}