Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.
1const [state, setState] = useState(false)2const [stateO, setStateO] = useState(false)3const [stateG, setStateG] = useState(false)4return (5 <>6 <CLoadingButton loading={state} onClick={() => setState(!state)}>7 Submit8 </CLoadingButton>9 <CLoadingButton variant="outline" loading={stateO} onClick={() => setStateO(!stateO)}>10 Submit11 </CLoadingButton>12 <CLoadingButton variant="ghost" loading={stateG} onClick={() => setStateG(!stateG)}>13 Submit14 </CLoadingButton>15 </>16)
1<CLoadingButton timeout={2000}>Submit</CLoadingButton>2<CLoadingButton variant="outline" timeout={2000}>3 Submit4</CLoadingButton>5<CLoadingButton variant="ghost" timeout={2000}>6 Submit7</CLoadingButton>
1<CLoadingButton color="info" timeout={2000}>2 Submit3</CLoadingButton>4<CLoadingButton color="success" variant="outline" timeout={2000}>5 Submit6</CLoadingButton>7<CLoadingButton color="warning" variant="ghost" timeout={2000}>8 Submit9</CLoadingButton>
1<CLoadingButton color="info" spinnerType="grow" timeout={2000}>2 Submit3</CLoadingButton>4<CLoadingButton color="success" spinnerType="grow" variant="outline" timeout={2000}>5 Submit6</CLoadingButton>7<CLoadingButton color="warning" spinnerType="grow" variant="ghost" timeout={2000}>8 Submit9</CLoadingButton>
1import { CLoadingButton } from '@coreui/react-pro'2// or3import CLoadingButton from '@coreui/react-pro/src/components/loading-button/CLoadingButton'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
disabledOnLoading | Makes button disabled when loading. | boolean | - |
loading | Loading state (set to true to start animation). | boolean | - |
spinnerType | Sets type of spinner. | 'border' | 'grow' | border |
timeout | Automatically starts loading animation and stops after a determined amount of milliseconds. | number | - |