@waysnx/ui-feedback

Feedback and overlay components from WaysNX — Modal, Toast, Drawer, Tooltip, and more.

Installation

npm install @waysnx/ui-feedback

This is a standalone package — no dependency on @waysnx/ui-core. Only requires react >= 18 as a peer dependency.

📖 Installation Guide — See all available packages and choose the right one for your needs.

Styling

Import the CSS in your app entry:

import '@waysnx/ui-feedback/dist/styles/index.css';

All feedback components use CSS variables with the --wx- prefix for easy theming:

:root {
  --wx-color-primary: #f19924;       /* Confirm buttons, progress bar, spinner */
  --wx-color-primary-hover: #e08916;
  --wx-color-error: #ef4444;         /* Destructive buttons, error toast */
  --wx-color-success: #22c55e;       /* Success toast, badge */
  --wx-color-warning: #f59e0b;       /* Warning toast, badge */
  --wx-color-info: #3b82f6;          /* Info toast, badge */
  --wx-color-surface: #ffffff;       /* Modal, drawer backgrounds */
  --wx-color-border: #e2e8f0;        /* Borders, dividers */
  --wx-overlay-bg: rgba(0, 0, 0, 0.4); /* Modal/drawer backdrop */
}

These are the same variables used across all WaysNX libraries. See the Theming Guide for the full list.

Components

Modal

Dialog overlay with close button, backdrop click, escape key, size variants, and optional footer.

import { Modal } from '@waysnx/ui-feedback';

<Modal open={open} onClose={() => setOpen(false)} title="Edit Profile" size="lg"
  footer={<><button onClick={() => setOpen(false)}>Cancel</button><button>Save</button></>}>
  <p>Modal body content</p>
</Modal>

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | — | Controls visibility | | onClose | () => void | — | Close handler | | title | string | — | Header title | | size | 'sm' | 'md' | 'lg' | 'fullscreen' | 'md' | Modal width | | footer | ReactNode | — | Footer slot | | closeOnBackdrop | boolean | true | Close on backdrop click | | closeOnEscape | boolean | true | Close on Escape key | | children | ReactNode | — | Body content |

ConfirmDialog

Confirmation dialog with confirm/cancel actions and variant styling.

import { ConfirmDialog } from '@waysnx/ui-feedback';

<ConfirmDialog
  open={open}
  title="Delete Item"
  message="This cannot be undone."
  variant="danger"
  confirmLabel="Delete"
  onConfirm={handleDelete}
  onCancel={() => setOpen(false)}
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | — | Controls visibility | | title | string | — | Dialog title | | message | string | — | Confirmation message | | variant | 'default' | 'danger' | 'warning' | 'default' | Button styling | | confirmLabel | string | 'Confirm' | Confirm button text | | cancelLabel | string | 'Cancel' | Cancel button text | | onConfirm | () => void | — | Confirm handler | | onCancel | () => void | — | Cancel handler |

Toast

Static inline toast and a full toast notification system with provider/hook pattern.

// Static inline toast
import { Toast } from '@waysnx/ui-feedback';
<Toast type="success" message="Saved!" />

// Toast system with auto-dismiss
import { ToastProvider, useToast } from '@waysnx/ui-feedback';

function App() {
  return (
    <ToastProvider position="top-right">
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const toast = useToast();
  return <button onClick={() => toast.success('Done!')}>Save</button>;
}

Toast (static) props: type ('success' | 'error' | 'info' | 'warning'), message (string)

ToastProvider props: position ('top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'), maxToasts (number, default 5)

useToast hook methods: success(msg, duration?), error(msg, duration?), info(msg, duration?), warning(msg, duration?)

EmptyState

Placeholder for empty content areas with optional icon and action.

import { EmptyState } from '@waysnx/ui-feedback';

<EmptyState
  icon={<span>📁</span>}
  title="No Projects"
  description="Create your first project to get started"
  action={<button>Create Project</button>}
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | icon | ReactNode | — | Icon or emoji | | title | string | — | Heading text | | description | string | — | Description text | | action | ReactNode | — | Action button/element |

Tooltip

Hover tooltip with 4 positions and keyboard support.

import { Tooltip } from '@waysnx/ui-feedback';

<Tooltip content="Save changes" position="top">
  <button>Save</button>
</Tooltip>

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | — | Tooltip text | | position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Placement | | delay | number | 200 | Show delay (ms) | | children | ReactNode | — | Trigger element |

Drawer

Slide-in side panel with backdrop, close button, and escape key support.

import { Drawer } from '@waysnx/ui-feedback';

<Drawer open={open} onClose={() => setOpen(false)} title="Settings" position="right" size="md">
  <p>Drawer content</p>
</Drawer>

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | — | Controls visibility | | onClose | () => void | — | Close handler | | title | string | — | Header title | | position | 'left' | 'right' | 'right' | Slide direction | | size | 'sm' | 'md' | 'lg' | 'md' | Panel width | | children | ReactNode | — | Body content |

Skeleton

Loading placeholder with shimmer animation.

import { Skeleton } from '@waysnx/ui-feedback';

<Skeleton count={3} />
<Skeleton variant="circle" />
<Skeleton variant="rect" height={160} />

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'text' | 'circle' | 'rect' | 'text' | Shape | | width | string | number | '100%' | Width | | height | string | number | — | Height | | count | number | 1 | Number of lines (text variant) |

Progress

Progress bar with label, value display, sizes, and custom color.

import { Progress } from '@waysnx/ui-feedback';

<Progress value={75} label="Upload" showValue size="lg" />
<Progress value={50} color="#22c55e" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | number | — | Progress 0–100 | | label | string | — | Label text | | showValue | boolean | false | Show percentage | | size | 'sm' | 'md' | 'lg' | 'md' | Bar height | | color | string | '#f19924' | Bar color |

Badge

Notification count or status indicator with dot mode and color variants.

import { Badge } from '@waysnx/ui-feedback';

<Badge count={5}><span>📧</span></Badge>
<Badge dot><span>🔔</span></Badge>
<Badge count={99} color="error" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | count | number | — | Badge number | | maxCount | number | 99 | Max before "99+" | | dot | boolean | false | Dot mode | | color | 'error' | 'success' | 'warning' | 'info' | 'default' | 'error' | Color variant | | children | ReactNode | — | Wrapped element |

Alert

Display important messages with different severity levels (info, success, warning, error).

import { Alert } from '@waysnx/ui-feedback';

<Alert type="info">This is an informational message</Alert>
<Alert type="success">Operation completed successfully!</Alert>
<Alert type="warning">Please review before proceeding</Alert>
<Alert type="error">An error occurred. Please try again.</Alert>

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'info' | 'success' | 'warning' | 'error' | 'info' | Severity level | | className | string | '' | Additional CSS class | | children | ReactNode | — | Alert content |

Spinner

Loading indicator with configurable size.

import { Spinner } from '@waysnx/ui-feedback';

<Spinner />
<Spinner size={32} />

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Width and height in px | | className | string | '' | Additional CSS class |

TypeScript Support

Full TypeScript support with exported types:

import type {
  ModalProps,
  ConfirmDialogProps,
  ToastProps,
  EmptyStateProps,
  TooltipProps,
  DrawerProps,
  SkeletonProps,
  ProgressProps,
  BadgeProps,
  AlertProps,
  SpinnerProps,
} from '@waysnx/ui-feedback';

Peer Dependencies

• react >= 18

Links

• npm Package: @waysnx/ui-feedback

License

MIT © WaysNX Technologies