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.
Rendered live, with the same build of the library you install.
Button.tsx
import { NButton } from '@nayan-ui/react';const Button = () => {return (<div><div className="flex flex-wrap gap-3"><NButton onClick={() => console.log('clicked')}>Primary</NButton><NButton isOutline>Outline</NButton><NButton isLoading={true}>Loading</NButton><NButton disabled>Disabled</NButton></div></div>);};export default Button;
| Name | Type | Default | Details |
|---|---|---|---|
| disabled | boolean | false | Disables 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. |
Other components solving nearby problems.
- React Button
- Custom Button in React
- Styled Button Component
- React Icon Button
- Loading Button in React
- React Button Component
- React Button Group
- Button with Icon in React
- Disabled Button in React
- Button Styles in React
- Example Button in React
- Rounded Button in React
- Button with Tooltip in React
- Button Animation in React
- React Button OnClick Handler
- Submit Button in React
- Primary Button in React
- Secondary Button in React
- Button Accessibility in React
- Button with Loading Indicator
- Button UI Component
- React Button Tutorial
- Button Design System
- React Button TypeScript
- Button Component Library
- Mobile Button React
- Button Best Practices
- React Button Performance
- CTA Button React
- Action Button Component
- Interactive Button React
- Button UI Library