components
Button

Button

primary

import { button } from "@avishka-ui/style";
 
function app() {
  return (
    <>
      <button className={button({ variant: "primary" })}>Primary</button>
      {/* or */}
      <button className={button()}>Primary</button>
    </>
  );
}
 
export default app;
secondary

import { button } from "@avishka-ui/style";
 
function app() {
  return (
    <button className={button({ variant: "secondary" })}>Secondary</button>
  );
}
 
export default app;
destructive

import { button } from "@avishka-ui/style";
 
function app() {
  return (
    <button className={button({ variant: "destructive" })}>Destructive</button>
  );
}
 
export default app;
custom

import { button } from "@avishka-ui/style";
 
function app() {
  return (
    {/* benifit is your last add class name added not overwrite tailwind class */}
    <button
      className={button(
        { variant: "primary" },
        "bg-purple-500 hover:bg-purple-600 w-52"
      )}>
      Custom Button
    </button>
  );
}
 
export default app;