Guide
Components
Button

Button Component Usage

ℹ️

This is a component that renders a button. It is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. This Button component design inspired by DaisyUI (opens in a new tab). You can use the Button component to render a button or a Next.js Link tag.

Example Preview

Button Example

Action Call Example

ℹ️

This example shows how to use the button component to call an actions like onClick or onSubmit

import { Button } from "@/@core";
 
export const MyComponent = () => {
  return (
    <Button
      color={"primary"}
      type="button" // type of button (button, submit, reset)
      onClick={() => {
        console.log("Button clicked");
      }}
    >
      Click Me
    </Button>
  );
};

Link Example

ℹ️

This example shows how to use the button component to render a link

import { Button } from "@/@core";
 
export const MyComponent = () => {
  return (
    <Button color={"primary"} link="https://www.google.com">
      Click Me
    </Button>
  );
};

Props

NameTypeDefaultDescription
typestringbuttonThe type of button to render button, submit, reset
colorstringprimaryThe color of the button primary, secondary, accent, neutral, info error, warning, success, base
linkstringnullThe link to render if the button is a link
classNamestringnullThe class name to apply to the button
ℹ️

Note: If you pass a link prop, the button will render as an Next Link tag. Otherwise, it will render as a native button tag.

Styling

ℹ️

The button component uses the @/@core Button component. You can override the styles by passing a className prop to the component. You can also use the classes prop to override the styles.

import { Button } from "@/@core";
 
export const MyComponent = () => {
  return (
    <Button
      color={"primary"}
      type="button" // type of button (button, submit, reset)
      onClick={() => {
        console.log("Button clicked");
      }}
      className="px-5 py-10 rounded-full"
    >
      Click Me
    </Button>
  );
};
BreadcrumbsCard