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="/setting.png"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