Finsire Frontend Components

*Important: Import css in your application

You need to import the css file in order for the component styles to work.

import "@finsire/frontend_components/dist/index.css";

1. Button

The Button component is a reusable React "button" component with customizable variants, sizes, states, and optional icons.

import the component as follows:

import { Button } from "@finsire/frontend_components";

| Props | Required | Data type | Default value | Description | | ----------- | -------- | --------- | ------------- | ----------------------------------------------------- | | text | Yes | String | | text to be shown in button (ex: "Click") | | variant | No | String | primary | accepted values: (primary, secondary, tertiary) | | textSize | No | String | md | accepted values: (sm, md, lg, xl) | | size | No | String | L | accepted values: (S, M, L) | | disabled | No | Boolean | false | pass true for disabled | | leftIcon | No | Component | | pass icon as a component | | rightIcon | No | Component | | pass icon as a component | | className | No | String | | pass tailwind class names | | props | No | Any | | pass a function like onClick, etc |

Usage example

<Button text="Primary Button" variant="primary" size="L" />

2. Checkbox

The Checkbox component is a reusable React "checkbox" component with customizable variants, disabled state, checked state, etc.

import the component as follows:

import { Checkbox } from "@finsire/frontend_components";

| Props | Required | Data type | Default value | Description | | ---------------------- | -------- | --------- | ------------- | ----------------------------------------------------------------------- | | id | Yes | String | | pass id of the checkbox | | variant | No | String | primary | accepted values: (primary, indeterminate) | | disabled | No | Boolean | false | pass true for disabled | | checked | No | Boolean | false | pass true for checked in case of disabled [for primary variant] | | defaultIndeterminate | No | Boolean | false | pass true for checked in case of disabled [for indeterminate variant] | | getCurrentStatus | No | Function | | pass a function which will get "status" [boolean value: (true, false)] | | className | No | String | | pass tailwind class names | | props | No | Any | | pass other props as required |

Usage example

const handleGetCheckedStatus = (status) => {
  console.log("status is:");
  console.log(status);
};

<Checkbox id="checkId" getCurrentStatus={handleGetCheckedStatus} />;

3. Avatar

The Avatar component is a reusable component with customizable variants, sizes, and states like checked, image, etc.

import the component as follows:

import { Avatar } from "@finsire/frontend_components";

| Props | Required | Data type | Default value | Description | | ------------- | -------- | --------- | ------------- | ----------------------------------------- | | variant | No | String | primary | accepted values: (primary, secondary) | | size | No | String | lg | accepted values: (lg, md, sm, xs) | | status | No | String | unchecked | accepted values: (checked, unchecked) | | letter | No | String | | pass any letter | | avatarImg | No | String | | pass image source | | bgFillColor | No | String | | pass hex code for background color | | pathColor | No | String | | pass hex code for foreground color |

Usage example

<Avatar variant="secondary" size="md" />

4. Toggle

The Toggle component is a reusable component with customizable sizes, showing icons and disabled states.

import the component as follows:

import { Toggle } from "@finsire/frontend_components";

| Props | Required | Data type | Default value | Description | | ------------------- | -------- | --------- | ------------- | ---------------------------------------------------------------------- | | size | No | String | lg | accepted values: (lg, md, sm) | | showIcon | No | Boolean | false | pass true to show icons | | toggleOnDisabled | No | Boolean | false | pass true for disabled ON state | | toggleOffDisabled | No | Boolean | false | pass true for disabled OFF state | | getStatus | No | Function | | pass a function which will get "status" [boolean value: (true, false)] |

Usage example

<Toggle size="md" showIcon={true} />