MVP Verson: 0.9.9 beta
Get Started
Styles
Theme
Components
UI
State management
Update Log
Button
The Button component is used to trigger an action or event, such as submitting a form, opening a
dialog, canceling an action, or performing a delete operation.
dialog, canceling an action, or performing a delete operation.
Default
PreviewCode
Success
PreviewCode
Danger
PreviewCode
Transparent
PreviewCode
Material
PreviewCode
Neumorphism
PreviewCode
Diasbled
PreviewCode
Loading
PreviewCode
Usage
Basic Loading
loading={true}loading="light"loading="dark"Array Format Loading
Use array format [showLoading, type] for dynamic control
loading={[true, "dark"]}loading={[true, "light"]}Loading States Reference
Value | Type | Color | Description |
|---|---|---|---|
true | Boolean | Dark | Default dark loading spinner |
"light" | String | Light | Light theme (Dark color loading spinner) |
"dark" | String | Dark | Dark theme (Light color loading spinner) |
[true, "dark"] | Array | Dark | Array format with dark spinner |
[true, "light"] | Array | Light | Array format with light spinner |
[false, "dark"] | Array | - | Loading disabled |
Important Notes:
- • When
loading=true, it defaults to dark spinner - • Array format is useful for dynamic state control:
[isLoading, "dark"] (useState) - • The first element in array controls visibility (boolean)
- • The second element in array controls spinner type ("light" or "dark")
- • If second element is omitted or invalid, defaults to "light"
Icon
PreviewCode
Usage
Basic Icon Usage
icon={settingIconUrl}icon={<FiSettings />}icon={FiSettings}icon={<FiSearch />}(Icon-only button)Icon with Loading State
icon={<FiUpload />}
loading={[true, "dark"]}Note:
When loading is active, the icon will be replaced by the loading spinner.
Supported Icon Types
Type | Format | Example | Description |
|---|---|---|---|
String | Image path | "/icons/user.png" | Renders as <img> tag |
React Element | JSX | <FiHome /> | Cloned with additional props |
React Component | Component reference | FiHome | Rendered as component |
Real-world Examples
Social Login Button:
icon="/google.png"
type="default"Important Notes:
- • Icon size is automatically adjusted based on button size
- • Custom styles on icon elements are preserved and merged
- • When loading is active, icon is replaced by loading spinner
- • For React elements, className and style props are intelligently merged
- • All icon types automatically get the
.btn-iconCSS class
Props
Universal Props
Prop | Type | Accepted Values | Description | Default | Version |
|---|---|---|---|---|---|
type | string | default | transparent | danger | success | Specifies the button style. Supports four predefined types. Custom styles can be applied via the "sx" prop. | default | - |
size | string | small | medium | large | huge | Specifies the button size. Supports four preset sizes. Custom sizes can be defined using the "sx" prop. | medium | - |
sx | object | object | Inline styles for customizing the button appearance. Note: Inline styles defined via the "style" prop take precedence over "sx". | {} | - |
disabled | boolean | true | false | Disables the button if set to true. | false | - |
outline | boolean | true | false | Applies an outline style to the button. | false | - |
enu | boolean | true | false | Applies neumorphic styling when enabled. | false | 0.3.0 |
onClick | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | Callback function triggered when the button is clicked. | - | - |
className | string | - | Custom CSS class name(s) applied to the button. | - | - |
loading | boolean | true | false | Indicates that the button is loading. | true | 0.6.0 |
icon | object | object | Icon to display in the button. | - | 0.6.0 |
iconPosition | string | left | right | Position of the icon within the button. | left | 0.6.0 |
rippleColor | string | rgba|rgb|#hex | customize the color of the ripple effect. | rgba(255, 255, 255, 0.6) | 0.8.3 |
On This Page
Button
Props