Are you ready for Cyber Monday Week Deals?
Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.
This Component is a part of CoreUI PRO for React.js, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.
React Loading Button Component
Loading Button
React loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
On this page
Example#
Create basic React Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.
<CLoadingButton color="primary" timeout={2000}>Submit</CLoadingButton><CLoadingButton color="primary" variant="outline" timeout={2000}>Submit</CLoadingButton><CLoadingButton color="primary" variant="ghost" timeout={2000}>Submit</CLoadingButton>Spinners#
Border (Default)#
The default option. Use loading buttons with a border spinner to indicate loading status.
<CLoadingButton color="info" timeout={2000}>Submit</CLoadingButton><CLoadingButton color="success" variant="outline" timeout={2000}>Submit</CLoadingButton><CLoadingButton color="warning" variant="ghost" timeout={2000}>Submit</CLoadingButton>Grow#
Switch to a grow spinner for React loading buttons by adding spinnerType="grow".
<CLoadingButton color="info" spinnerType="grow" timeout={2000}>Submit</CLoadingButton><CLoadingButton color="success" spinnerType="grow" variant="outline" timeout={2000}>Submit</CLoadingButton><CLoadingButton color="warning" spinnerType="grow" variant="ghost" timeout={2000}>Submit</CLoadingButton>API#
CLoadingButton#
import { CLoadingButton } from '@coreui/react-pro'// orimport CLoadingButton from '@coreui/react-pro/src/components/loading-button/CLoadingButton'| Property | Description | Type | Default |
|---|---|---|---|
| active | Toggle the active state for the component. | boolean | - |
| as | Component used for the root node. Either a string to use a HTML element or a component. | ElementType | - |
| className | A string of all className you want applied to the base component. | string | - |
| color | Sets the color context of the component to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | - |
| disabled | Toggle the disabled state for the component. | boolean | - |
| disabledOnLoading | Makes button disabled when loading. | boolean | - |
| href | The href attribute specifies the URL of the page the link goes to. | string | - |
| loading | Loading state (set to true to start animation). | boolean | - |
| role | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | string | - |
| shape | Select the shape of the component. | 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string | - |
| size | Size the component small or large. | 'sm' | 'lg' | - |
| spinnerType | Sets type of spinner. | 'border' | 'grow' | border |
| timeout | Automatically starts loading animation and stops after a determined amount of milliseconds. | number | - |
| type | Specifies the type of button. Always specify the type attribute for the <button> element.Different browsers may use different default types for the <button> element. | 'button' | 'submit' | 'reset' | - |
| variant | Set the button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | - |