Buttons, Dialogs, Toasts & more yet to come...
Reactivus was created with only one goal, to facilitate frontend web development with pre built reusable components. The lib is yet under construction and many ideas are about to be brought to life.

  npm install reactivus
  # or 
  yarn add reactivus


Import the Button component like this:

  import { Button } from 'reactivus';

Basic Usage

To display a simple button with a text on it, use the label prop.

  <Button label="Submit" />


To change the styles, use the style prop.

  <Button label="Success Button" style="btn-success" /> 
  <Button label="Danger Button" style="btn-danger" />
  <Button label="Warning Button" style="btn-warning" />
  <Button label="Info Button" style="btn-info" />
  <Button label="Dark Button" style="btn-dark" />


To display icons inside your buttons, use the icon and the iconPosition props.
The iconPosition prop accepts both left and right options.

  <Button label="Success Button" style="btn-success" icon={<PlusSvg />} iconPosition="left" /> 
  <Button label="Danger Button" style="btn-danger" icon={<PlusSvg />} iconPosition="left" />
  <Button label="Warning Button" style="btn-warning" icon={<PlusSvg />} iconPosition="left" />
  <Button label="Info Button" style="btn-info" icon="+" iconPosition="right" />
  <Button label="Dark Button" style="btn-dark" icon="+" iconPosition="right" />

  <Button style="btn-success" icon={<PlusSvg />} />
  <Button style="btn-danger" icon={<PlusSvg />} />
  <Button style="btn-warning" icon={<PlusSvg />} />
  <Button style="btn-info" icon={"+"} />
  <Button style="btn-dark" icon={"+"} />


To display small messages in your buttons, use the tooltip and tooltipPosition props.

  <Button label="Success Button" style="btn-success" shadow tooltip="Tooltip message at success button" tooltipPosition="top" />
  <Button label="Danger Button" style="btn-danger" shadow tooltip="Tooltip message at danger button" tooltipPosition="right" />
  <Button label="Warning Button" style="btn-warning" shadow tooltip="Tooltip message at warning button" tooltipPosition="left" />
  <Button label="Info Button" style="btn-info" shadow tooltip="Tooltip message at info button" tooltipPosition="bottom" />
  <Button label="Dark Button" style="btn-dark" shadow tooltip="Tooltip message at dark button" tooltipPosition="top" />


To display rounded buttons, use the rounded prop.

  <Button label="Success Button" style="btn-success" rounded /> 
  <Button label="Danger Button" style="btn-danger" rounded />
  <Button label="Warning Button" style="btn-warning" rounded />
  <Button label="Info Button" style="btn-info" rounded />
  <Button label="Dark Button" style="btn-dark" rounded />

  <Button style="btn-success" icon={<PlusSvg />} rounded />
  <Button style="btn-danger" icon={<PlusSvg />} rounded />
  <Button style="btn-warning" icon={<PlusSvg />} rounded />
  <Button style="btn-info" icon={"+"} rounded />
  <Button style="btn-dark" icon={"+"} rounded />


To display buttons as textual elements, use the text prop.

  <Button label="Success Button" style="btn-success" text /> 
  <Button label="Danger Button" style="btn-danger" text />
  <Button label="Warning Button" style="btn-warning" text />
  <Button label="Info Button" style="btn-info" text rounded />
  <Button label="Dark Button" style="btn-dark" text rounded />

  <Button style="btn-success" text rounded icon={<PlusSvg />} />
  <Button style="btn-danger" text rounded icon={<PlusSvg />} />
  <Button style="btn-warning" text rounded icon={<PlusSvg />} />
  <Button style="btn-info" text icon={<PlusSvg />} />
  <Button style="btn-dark" text icon={<PlusSvg />} />


You can display buttons with predefined shadow, use the shadow prop.

  <Button label="Success Button" style="btn-success" text shadow /> 
  <Button label="Danger Button" style="btn-danger" text shadow />
  <Button label="Warning Button" style="btn-warning" text shadow />
  <Button label="Info Button" style="btn-info" text rounded shadow />
  <Button label="Dark Button" style="btn-dark" text rounded shadow />
  <Button style="btn-success" text rounded icon={<PlusSvg />} shadow />
  <Button style="btn-danger" text rounded icon={<PlusSvg />} shadow />
  <Button style="btn-warning" text rounded icon={<PlusSvg />} shadow />
  <Button style="btn-info" text icon={<PlusSvg />} shadow />
  <Button style="btn-dark" text icon={<PlusSvg />} shadow />


To set a laoding status, use the loading prop.

  <Button label="Success Button" style="btn-success" loading iconPosition="right"/>
  <Button label="Danger Button" style="btn-danger" loading iconPosition="right" />
  <Button style="btn-warning" icon={<PlusSvg />} loading/>
  <Button label="Info Button" style="btn-info" loading iconPosition="right" text shadow />
  <Button label="Dark Button" style="btn-dark" loading iconPosition="right" />


To disable the button, use the disabled prop.

  <Button label="Success Button" style="btn-success" disabled />
  <Button label="Danger Button" style="btn-danger" disabled />
  <Button label="Warning Button" style="btn-warning" disabled />
  <Button label="Info Button" style="btn-info" disabled />
  <Button label="Dark Button" style="btn-dark" disabled />



Import the dialog method like this:

  import { dialog } from 'reactivus';

Basic Usage

To show a simple dialog with a text title on it, use the show method together with the title prop.{
  title: "This dialog is working!",


To display a text under the dialog title, use the text prop.{
  title: "This dialog is working!",
  text: "Have u installed Reactivus already?",


To display a icon above, use the icon prop.{
  icon: "success",
  title: "Good job ;)",
  text: "The icon options are 'success', 'danger', 'warning', 'info' and 'question'",


To display a JSX element, use the htmlx prop.{
  icon: "success",
  title: "Good job ;)",
  htmlx: (
        width: '100%',
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-around",
      <Button label="Submit" style="btn-success" />
      <Button label="Cancel" style="btn-danger" />


To display the dialog in a specific position, use the position prop.{
    icon: "success",
    title: "Good job ;)",
    text: "The default position property is 'center'",
    position: "top-left",
    htmlx: (
          width: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-around",
        }} >


The dialog is a promise with 3 possible return values such as isConfirmed, isCanceled and isAborted.
The isConfirmed value is returned when clicking in the confirm button.
The isCanceled value is returned when clicking in the cancel button.
The isAborted value is returned when clicking outside the dialog or in the close button.

    icon: "question",
    title: "Check the return values?",
    confirmButtonText: "Yes, check it out!",
    showCancelButton: true,
    cancelButtonText: "No, leave...",
  .then((res) => {
    if (res.isConfirmed) {
      toast.success("You confirmed the action!");
    } else if (res.isCanceled) {
      toast.danger("You canceled the action!");
    } else if (res.isAborted) {
      toast.warning("You aborted the action!");


Import both Toast and ToastContainer components like this:

  import { toast } from 'reactivus';

Basic Usage

To display a simple info toast with a message, use the info method.
Obs.: You need to place the ToastContainer component at your root layout file.

  <ToastContainer closeOnClick position="top-right" autoClose={5000} />

  <Button label="Toast" onClick={() =>"This is an info toast!") } />

Toast Types

You can choose between the following toast types:

  <Button label="Danger Toast" style="btn-danger" onClick={() => toast.danger("This is an danger toast!")} />
  <Button label="Danger Toast" style="btn-success" onClick={() => toast.success("This is an success toast!")} />
  <Button label="Info Toast" style="btn-info" onClick={() =>"This is an info toast!")} />
  <Button label="Warning Toast" style="btn-warning" onClick={() => toast.warning("This is an warning toast!")} />