@athosws/react-components v1.0.7

How to publish the package to npm

yarn rollup
yarn publish

ATHOS React Components

First install:

npm install @athosws/react-components
yarn add @athosws/react-components

ATHOSButton Component

The ATHOSButton component is a versatile button component that supports multiple styles and states, such as default, alt, action, and disabled. It allows for customization of colors, text, and additional styling. It also supports an optional tooltip that provides extra information when hovering over the button.

Import

To import the ATHOSButton component into your project, use the following import statement:

import { ATHOSButton } from "@athosws/react-components";

Usage

Basic Usage

import React from "react";
import { ATHOSButton } from "@athosws/react-components";

const App = () => {
  return (
    <ATHOSButton type="default" onClick={() => console.log("Button clicked!")}>
      Click Me
    </ATHOSButton>
  );
};

export default App;

With Tooltip

To use a tooltip, pass the tooltip prop with the desired content:

<ATHOSButton
  type="action"
  tooltip="This is an action button"
  onClick={() => console.log("Action button clicked!")}
>
  Action
</ATHOSButton>

Disabled State

To disable the button, set the disabled prop to true:

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

Props

The ATHOSButton component accepts the following props: