A Button component is a fundamental UI element that allows users to trigger actions or events, such as submitting a form, opening a dialog, or navigating to another page. Buttons are interactive and typically styled to stand out, making it easy for users to identify and interact with them. They can come in various types, such as primary, secondary, or disabled, depending on their purpose or state.

# Demo

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
isOutline	boolean	false	You can pass this to create outline button.
isLoading	boolean	false	You can pass this to show loading indication.
loadingText	string	' '	You can pass this to show customised loading text.
size	ButtonSize	ButtonSize.MD	You can pass size of the button.
children	string \| ReactNode	Required	You can pass button content as children.
onClick	(e: any) => void	Required	You can get callback when button clicked.

# Usage

import { NButton, ButtonSize } from 'nayan';

const Button = () => {
  return (
    <div>
      <NButton size={Size.XS} disabled className="text-text bg-card border border-border mr-2">
        Button
      </NButton>
      <NButton type="submit" size={ButtonSize.XS} onClick={() => console.log('Button clicked')} className="text-white bg-blue-500 hover:bg-blue-600 border border-blue-600 mr-2">
        Button
      </NButton>
      <NButton type="reset" size={ButtonSize.SM} onClick={() => console.log('Button clicked')} className="text-white bg-green-500 hover:bg-green-600 border border-green-600 mr-2">
        Button
      </NButton>
      <NButton size={ButtonSize.MD} isLoading={true} onClick={() => console.log('Button clicked')} className="text-white bg-yellow-500 hover:bg-yellow-600 border border-yellow-600 mr-2">
        Button
      </NButton>
      <NButton size={ButtonSize.LG} onClick={() => console.log('Button clicked')} className="mr-2">
        Button
      </NButton>
      <NButton size={ButtonSize.LG} isOutline={true} onClick={() => console.log('Button clicked')} className="mr-2">
        Button
      </NButton>
      <NButton size={ButtonSize.LG} onClick={() => console.log('Button clicked')} className="text-white bg-purple-500 hover:bg-purple-600 border border-purple-600 rounded-full mr-2">
        Button
      </NButton>
    </div>
  );
};

export default Button