Nayan UI - Button

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

Basic Buttons

Standard button styles with different visual treatments.

Button States

Different states including disabled and loading.

Button Sizes

Different sizes using className customization.

Buttons with Icons

Add icons to provide visual context.

Icon Only Buttons

Compact buttons with only icons.

Button Shapes

Different border radius and shapes.

Form Buttons

Buttons with different form types and behaviors.

Loading States

Different loading scenarios with custom text.

Custom Styled Buttons

Buttons with custom colors and effects.

Button Groups

Related buttons grouped together.

Accessibility

Buttons with proper ARIA attributes and labels.

Saves the current document to your device

# Usage

# Attributes

Name	Type	Default	Details
size	ButtonSize	ButtonSize.MD	You can pass size of the button.
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.
leftIcon	React.ReactNode	Optional	Icon to display on the left side of button.
rightIcon	React.ReactNode	Optional	Icon to display on the right side of button.
children	React.ReactNode	Required	You can pass button content as children.

# Tags