react-smart-button (JS-only)

Tailwind-friendly React Button components for Next.js. Plain JavaScript (no TypeScript). Lives in the buttons/ folder and publishes as a public NPM package.

Features

• Variants: filled, outline, ghost, soft
• Sizes: presets sm|md|lg (default md) + custom numeric size (e.g. size={40} or size="40px")
• Shape/Radius: pill, rounded, shape, or custom radius
• Border controls: width/style/color (with sensible defaults)
• Duo color gradient ring (e.g. "purple to pink") applied to the outer ring
• Colors: preset names (e.g. primary, danger, success, indigo, etc.) OR any CSS color (hex/rgb/hsl)
• States: idle, loading, submitted, downloading (+ loading boolean alias)
• Icons: pass any React node; built-in download/check/loader
• Download mode: circular progress + percentage
• SSR-safe ("use client") and compatible with Next.js 14+

Install (consume in your app)

npm i react-smart-button

Local dev & publish (optional)

cd buttons
npm i
npm run dev
npm run build
npm publish --access public

Tailwind CSS: This library uses Tailwind utility classes in className. Your app should already include Tailwind. Dynamic values (color, radius, size) are applied via inline styles and won’t be purged.

Usage (in your Next.js app)

import { Button } from 'react-smart-button';

export default function Demo() {
  return (
    <div className="space-x-3">
      <Button>Default</Button>
      <Button variant="outline" color="primary" pill>Outline Pill</Button>
      <Button color="#3b82f6" label="Custom Color" />
      <Button duoColors="purple to pink" variant="outline">Gradient Ring</Button>
      <Button size="sm" variant="outline" color="primary" pill>Small</Button>
      <Button loading loadingLabel="Loading..." />
      <Button state="downloading" progress={42}>Downloading</Button>
    </div>
  );
}

API

• variant: 'filled' | 'outline' | 'ghost' | 'soft' (default: 'filled')
• size: 'sm' | 'md' | 'lg' | number | string(px). Numeric/string sizes scale height and horizontal padding.
• pill: boolean — fully rounded
• rounded: boolean — larger rounding preset
• shape: 'pill' | 'rounded' | 'square' (alternative to the booleans)
• radius: number (px) — custom radius (used when shape is not set)
• borderWidth | borderSize: number (px) (default: 1)
• borderStyle: CSS border style (default: 'solid')
• borderColor: CSS color (default: 'transparent')
• color: preset name ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'indigo', 'violet', 'purple', 'pink', 'teal', 'emerald', 'sky', 'orange', 'dark', 'light') OR any CSS color string. For filled, sets background (text becomes white).
• duoColors: [from, to] | string like 'purple to pink' (adds gradient ring)
• duoColor: alias for duoColors
• height, width: number | string (px)
• fullWidth: boolean — stretches to container width
• state: 'idle' | 'loading' | 'submitted' | 'downloading'
• loading: boolean (alias for state="loading")
• loadingLabel: string (default: 'Loading...')
• download: boolean (legacy alias that enables download mode)
• progress: number (0..100)
• icon: ReactNode (custom icon)
• startIcon / endIcon: ReactNode (slot icons)
• iconPosition: 'left' | 'right' (default: 'left')
• as: 'button' | 'a' | React component (default: 'button')
• href: when as='a' or routing components support it
• label or children: button text (if none, defaults from color name)

Props table (quick reference)

| Prop | Type | Default | Notes | |---|---|---|---| | variant | string (filled/outline/ghost/soft) | filled | Visual style | | size | 'sm'/'md'/'lg' or number or string(px) | md | Presets or custom numeric height; width grows with padding | | pill | boolean | false | Fully rounded corners | | rounded | boolean | false | Larger rounding preset | | shape | 'pill'/'rounded'/'square' | — | Alternative to booleans | | radius | number (px) | 8 | Custom radius when shape is not set | | borderWidth | number (px) | 1 | Border width | | borderSize | number (px) | — | Alias for borderWidth | | borderStyle | string | solid | CSS border style | | borderColor | string | transparent | CSS color | | color | preset name or CSS color | — | Preset names or any CSS color; for filled, sets background | | duoColors | [from,to] or string | — | Adds gradient ring; e.g. 'purple to pink' | | duoColor | string | — | Alias for duoColors | | height | number or string(px) | — | Overrides computed height | | width | number or string(px) | — | Set fixed width; or use fullWidth | | fullWidth | boolean | false | Stretches to container width | | state | string (idle/loading/submitted/downloading) | idle | High-level state | | loading | boolean | false | Alias for state="loading" | | loadingLabel | string | Loading... | Text shown while loading | | download | boolean | false | Legacy alias enabling download mode | | progress | number (0..100) | — | Download progress (shows circular indicator + %) | | icon | ReactNode | — | Custom icon | | startIcon | ReactNode | — | Icon slot (left) | | endIcon | ReactNode | — | Icon slot (right) | | iconPosition | 'left'/'right' | left | When using single icon prop | | as | 'button'/'a' or React component | button | Polymorphic element | | href | string | — | When as='a' or router component | | label/children | string/ReactNode | — | Button text; if empty, defaults from color name |

Preset colors

• primary #3b82f6
• secondary #64748b
• success #22c55e
• danger #ef4444
• warning #f59e0b
• info #06b6d4
• indigo #6366f1
• violet #8b5cf6
• purple #a855f7
• pink #ec4899
• teal #14b8a6
• emerald #10b981
• sky #0ea5e9
• orange #f97316
• dark #111827
• light #ffffff

Notes

• Duo color mode renders a gradient ring that respects border radius and replaces the regular border.
• Width is by content by default; use width or fullWidth to control width explicitly. Larger sizes also increase horizontal padding.
• For download buttons: shows circular progress when progress is provided; shows a loader when state='loading' and no progress.

License

MIT