@frontplus-ui/button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

This component heavilly depends on @frontplus-ui/theme. Because theme package contains all component styles and TailwindCSS plugin.

Features

• Accessible – Uses a native button element under the hood, with support for the Space and Enter keys.
• Cross-browser – Mouse, touch, keyboard, and focus interactions are normalized to ensure consistency across browsers and devices.

for more details refer to this blog post

Installation

1. lets assume you have setup TailwindCSS. If not please refer to this guide

2. set path and plugin

   // file: tailwind.config.js
   import { frontplusui } from "@frontplus-ui/theme";
   
   export default {
     content: [
       // includes theme package so tailwindcss generate component styles],
       "./node_modules/@frontplus-ui/theme/dist/**/*.{js,jsx}",
     ],
     // add plugin because @frontplus-ui uses custom configurations
     plugins: [frontplusui()],
   };

3. install button component

   pnpm add @frontplus-ui/button
   # or
   yarn add @frontplus-ui/button
   # or
   npm i @frontplus-ui/button

API Reference

is in progress

Usage/Examples

import { Button } from "@frontplus-ui/button";

function App() {
  return <Button>frontplus ui</Button>;
}

Licence

This project is licensed under MIT license