@digitus-fci-oa/button

A reusable, accessible Button component with support for variants, icons, loading states, and tooltip-enabled icon buttons.

Refer to this URL for npm:

https://github.com/digitus-git/AFCI_OffAuto/tree/develop_rel_phase1/packages

Installation

npm install @digitus-fci-oa/button

Usage

import { Button } from '@digitus-fci-oa/button';
import { Save, Trash2, X, Pencil } from 'lucide-react';

export function TestButton() {
  return (
    <div style={{ display: "flex", gap: "10px", padding: "20px" }}>

      <Button variant="save" leftIcon={<Save size={14} />} loading={saveLoading}>
        Save
      </Button>

      <Button variant="update" rightIcon={<Save size={14} />}>
        Update
      </Button>

      <Button variant="delete" leftIcon={<Trash2 size={14} />}>
        Delete
      </Button>

      <Button variant="cancel" leftIcon={<X size={14} />}>
        Cancel
      </Button>

      {/* Icon-only button with tooltip */}
      <Button
        variant="update"
        size="icon"
        iconButton
        tooltipLabel="Edit record"
      >
        <Pencil size={16} />
      </Button>

    </div>
  );
}

export default function Example() { const [open, setOpen] = useState(false);

const handleExport = async ( type: "xlsx" | "csv" | "pdf" ) => { console.log(type); };

return ( <ExportButton open={open} setOpen={setOpen} onExport={handleExportClick} buttonClassName=" flex items-center gap-[2px] bg-[hsla(161,94%,30%,1)] h-[30px] px-3 rounded-[8px] text-white text-xs font-medium " buttonIcon={ <> Export </> } items={{ xlsx: { label: "XLSX", icon: , iconClassName: "text-green-600", textClassName: "text-green-600", iconWidth: "w-5", iconHeight: "h-5", },

              csv: {
                label: "CSV",
                icon: <FileText />,
                iconClassName: "text-blue-600",
                textClassName: "text-blue-600",
                iconWidth: "w-5",
                iconHeight: "h-5",
              },

              pdf: {
                label: "PDF",
                icon: <FileText />,
                iconClassName: "text-red-600",
                textClassName: "text-red-600",
                iconWidth: "w-5",
                iconHeight: "h-5",
              },
            }}
          />

); }

---
---

## Props

| Prop           | Type              | Default     | Description                                                                 |
|----------------|-------------------|-------------|-----------------------------------------------------------------------------|
| `variant`      | `string`          | `"default"` | Button style: `save`, `update`, `delete`, `cancel`                          |
| `size`         | `string`          | `"default"` | Button size: `default`, `sm`, `lg`, `icon`, `xs`                            |
| `loading`      | `boolean`         | `false`     | Shows a loading spinner and disables the button                             |
| `leftIcon`     | `React.ReactNode` | `undefined` | Icon displayed to the left of the label                                     |
| `rightIcon`    | `React.ReactNode` | `undefined` | Icon displayed to the right of the label                                    |
| `iconButton`   | `boolean`         | `false`     | Wraps the button in a tooltip provider (use with `tooltipLabel`)            |
| `tooltipLabel` | `string`          | `undefined` | Tooltip text shown on hover when `iconButton` is `true`                     |
| `onClick`      | `() => void`      | `undefined` | Click handler                                                               |
| `children`     | `React.ReactNode` | —           | Button label text or icon content                                           |
| `disabled`     | `boolean`         | `false`     | Disables the button                                                         |
| `className`    | `string`          | `undefined` | Additional CSS classes (Tailwind supported)                                 |
| `style`        | `CSSProperties`   | `undefined` | Inline styles (merged on top of variant styles)                             |

| `open`        | `boolean`        |                   |Controls dropdown visibility |
| `setOpen`     | `Dispatch<SetStateAction<boolean>>`       | Updates dropdown state |
| `onExport`    |     `(type) => void`                      | Export callback |
| `buttonLabel`  | `string` |                               |     Button label |
| `buttonIcon`  | `ReactNode` |                             |   Optional button icon |
| `items`       | `Record` |                                |    Export menu items |
| `className`   | `string` |                                |   Additional classes |

---

## Variants

| Variant   | Color            | Description                      |
|-----------|------------------|----------------------------------|
| `default` | Blue (`#3B82F6`) | General-purpose action           |
| `save`    | Navy (`#003B71`) | Primary save / create action     |
| `update`  | Navy (`#003B71`) | Edit / update action             |
| `delete`  | Red (`#FF6070`)  | Destructive / remove action      |
| `cancel`  | White / bordered | Dismiss / abort action           |

---

## Sizes

| Size      | Height | Description                        |
|-----------|--------|------------------------------------|
| `default` | 40px   | Standard button                    |
| `sm`      | 36px   | Compact button                     |
| `lg`      | 44px   | Large button                       |
| `icon`    | 40×40px| Square icon-only button            |
| `xs`      | 20px   | Extra-small button (e.g. in tables)|

---

## Icon Support

Icons can be placed on the **left** or **right** side of the button label using `leftIcon` and `rightIcon` props. Works with any icon library (e.g. [lucide-react](https://lucide.dev/)).

```tsx
import { Pencil } from 'lucide-react';

<Button variant="update" leftIcon={<Pencil size={14} />}>
  Edit
</Button>

Loading State

Pass loading={true} to show a spinner and automatically disable the button during async operations.

const [saving, setSaving] = useState(false);

<Button
  variant="save"
  loading={saving}
  onClick={() => setSaving(true)}
  leftIcon={<Save size={14} />}
>
  Save
</Button>

Supported Export Types

• XLSX
• CSV
• PDF

Features

• Reusable dropdown export button
• TailwindCSS support
• Custom icons
• Controlled open state
• Lightweight and reusable

Icon Button with Tooltip

Set iconButton={true} to wrap the button in a tooltip. Pass tooltipLabel to set the tooltip text. Pair with size="icon" for a square icon-only button.

import { Trash2 } from 'lucide-react';

<Button
  variant="delete"
  size="icon"
  iconButton
  tooltipLabel="Delete record"
  onClick={handleDelete}
>
  <Trash2 size={16} />
</Button>

Note: tooltipLabel only displays when iconButton is true. If tooltipLabel is omitted while iconButton is true, the tooltip trigger is still rendered but no tooltip content is shown.

RichTooltip

A reusable tooltip component built on top of the existing Tooltip component using @radix-ui/react-tooltip. It supports both plain text and rich JSX content, making it ideal for displaying additional information such as status details, user information, descriptions, and more.

Features

• Built on Radix UI Tooltip
• Supports rich JSX content
• Supports plain text content
• Configurable tooltip placement
• Configurable tooltip offset
• Automatically hides when disabled
• White card-style tooltip without arrow
• Reusable across applications

Installation

The RichTooltip component is included in the UI package.

import RichTooltip from "@digitus-fci-oa/tooltip";

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | Required | Element that triggers the tooltip. | | text | React.ReactNode | undefined | Plain text content to display inside the tooltip. Ignored when content is provided. | | content | React.ReactNode | undefined | Rich JSX content displayed inside the tooltip. | | side | "top" \| "right" \| "bottom" \| "left" | "top" | Position of the tooltip relative to the trigger element. | | sideOffset | number | 6 | Distance between the trigger and the tooltip. | | className | string | undefined | Additional CSS classes applied to the tooltip content. | | disabled | boolean | false | Disables the tooltip. |

Basic Usage

<RichTooltip text="This is a tooltip">
  <button>Hover me</button>
</RichTooltip>

Rich Content

<RichTooltip
  content={
    <div className="min-w-[180px]">
      <div className="font-semibold text-green-700">
        RoHs Department
      </div>

      <div className="mt-1 text-green-600">
        Arun Kumar
      </div>
    </div>
  }
>
  <button>Hover me</button>
</RichTooltip>

Using with StatusBadge

<RichTooltip
  content={
    <div className="min-w-[180px]">
      <div className="font-semibold text-green-700">
        RoHs Department
      </div>

      <div className="mt-1 text-green-600">
        Arun Kumar
      </div>
    </div>
  }
>
  <StatusBadge
    status={normalizeStatus(rowData.status)}
    config={rdrStatusConfig}
  />
</RichTooltip>

Note: If you use a custom React component as the trigger (such as StatusBadge), it must forward its ref using React.forwardRef() so that Radix Tooltip can attach its event handlers correctly.

Tooltip Placement

<RichTooltip side="top">
  ...
</RichTooltip>

<RichTooltip side="right">
  ...
</RichTooltip>

<RichTooltip side="bottom">
  ...
</RichTooltip>

<RichTooltip side="left">
  ...
</RichTooltip>

Custom Offset

<RichTooltip
  side="right"
  sideOffset={12}
  text="Additional Information"
>
  <button>Hover me</button>
</RichTooltip>

Disable Tooltip

<RichTooltip
  disabled
  text="Hidden Tooltip"
>
  <button>Hover me</button>
</RichTooltip>

Notes

• RichTooltip is built on top of the reusable Tooltip component.
• Rich tooltips use the rich variant internally.
• Rich tooltips display a white card-style layout.
• Rich tooltips do not display an arrow by default.
• Standard tooltips continue to use the default black appearance with an arrow.