Usage: React

The React package provides typed, accessible components with forwardRef support.

Setup

// Import CSS once at your app root
import "@paramanu/buttons-js/css"

Btn

import { Btn } from "@paramanu/buttons-react"

function App() {
  return (
    <Btn variant="primary" size="md" onClick={() => alert("Clicked!")}>
      Click me
    </Btn>
  )
}

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "danger" | "ghost"	"primary"	Visual style
size	"sm" | "md" | "lg"	"md"	Size
disabled	boolean	false	Disabled state
fullWidth	boolean	false	Full width
type	"button" | "submit" | "reset"	"button"	HTML button type

All standard HTML button attributes are also accepted.

Examples

<Btn variant="primary">Primary</Btn>
<Btn variant="secondary">Secondary</Btn>
<Btn variant="danger">Danger</Btn>
<Btn variant="ghost">Ghost</Btn>
<Btn size="sm">Small</Btn>
<Btn size="lg">Large</Btn>
<Btn disabled>Disabled</Btn>
<Btn fullWidth>Full Width</Btn>