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;