Button #
Button is a component that can be used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Basic Buttons #
import Button from "@/components/Button";
const ButtonPage = () => {
return (
<div>
<Button text="primary" className="btn-primary" />
</div>
);
};
TIP
You can use className
props for button type. Available types: className="btn-primary"
, className="btn-secondary"
, className="btn-success"
, className="btn-info"
, className="btn-danger"
, className="btn-warning"
,
Outline Buttons
You can use className
props for for an outline button. For example: className="btn-outline-primary"
, className="btn-outline-secondary"
Light Color Buttons
Just add an extra class light
to the className for a light color button. For example: className="btn-primary light"
, type="btn-secondary light"
Raised Buttons
Just add an extra class shadow-base2
to the className for a raised button. For example: className="btn-primary shadow-base2"
, className="btn-secondary shadow-base2"
Rounded Buttons
Just add an extra class rounded-[999px]
to the className for a rounded button. For example: className="btn-primary rounded-[999px]"
, className="btn-secondary rounded-[999px]"
Rounded Outline Buttons
Just add an extra class rounded-[999px]
to the className for a rounded button. For example: className="btn-outline-success rounded-[999px]"
, className="btn-outline-secondary rounded-[999px]"
Icon Buttons
Just add an extra props icon
to add and icon. For example: icon="heroicons-outline:newspaper"
. You can use iconPosition="right"
props to move the icon on the right side.
Button Sizes
You can use className="btn-sm"
props for small button and className="btn-xl"
for large button.
Disabled Buttons
Just add an extra props isDisabled
to make a button disabled.
Loading Buttons
Just add an extra props isLoading
to make a button with loading animation.
Block Buttons
Just add an extra class block-btn
to the className to make a block button. For example: className="btn-success lock-btn"
, className="btn-secondary lock-btn"
Router Link Buttons
Just add an extra props link
to add a link to the button. For example: link="/home"