Usage: Templated

The templated mode uses CSS modules with hashed class names, ideal for bundled applications.

Setup

import "@paramanu/buttons-js/css"

Using CSS Modules

import { btnModuleClasses } from "@paramanu/buttons-js"
import classMap from "@paramanu/buttons-js/modules/button/map"

const className = btnModuleClasses(classMap, {
  variant: "primary",
  size: "md",
})
// Returns hashed class names like "pm_a1b2_pm-btn pm_c3d4_pm-btn--primary ..."

Using Human-Readable Classes

You can also use the readable class builder in any template:

import { btnClasses } from "@paramanu/buttons-js"

const className = btnClasses({ variant: "primary", size: "md" })
// "pm-btn pm-btn--primary pm-btn--md"

Example with a Template Engine

<!-- EJS / Handlebars / Nunjucks -->
<button class="<%= btnClasses({ variant: 'primary', size: 'md' }) %>">Click me</button>