Hudoro FAB

Hudoro FAB is a strict and customizable FAB component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/fab

Instal package using yarn

  yarn add @hudoro/fab

Instal package using npm

  npm i @hudoro/fab

Usage/Examples (you can combine using icon package hudoro)

import React, {SVGProps} from "react";
import {Fab} from "@hudoro/fab";
import ReactDOM from "react-dom/client";

const CustomIcon = (props: SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      {...props}
    >
      <path
        d="M2.66666 7.99999H13.3333M7.99999 2.66666V13.3333"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
};

const App = () => (
  <div style={{display: "flex", gap: "5px", flexDirection: "column"}}>
      <Fab
        size="sm"
        Icon={CustomIcon}
        state="warning"
        rounded="circle"
        variant="outline"
      />
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/fab

Props that you can pass to <Fab {...props} />

| Prop Name | Value | required | | :-------- | :------------------------------------------- | :------- | | size | "sm" / "md" / "lg" | false | | state | "default" / "success" / "danger" / "warning" | false | | variant | "solid" / "outline" | false | | Icon | React.ComponentType<SVGProps> | false | | rounded | "medium" / "circle" | false |