ComponentsLoadingLoadingLoading provides feedback about a process that is taking place in the application.GitHub LogoSource CodeNPM Logouikit-react-core UsagePropsClassesLoading...labelsmallcolor#2563EB<HvLoading label="Loading..." color="primary" /> <HvLoading label="Loading..." color="primary" />Different colorsYou can change the default color of the loader by passing a color name from the UI Kit color palette, a CSS color name or a hex color code.<> <HvLoading color="positive" /> <HvLoading color="cat2" /> <HvLoading color="aquamarine" /> <HvLoading color="#c73aa8" /> </> <> <HvLoading color="positive" /> <HvLoading color="cat2" /> <HvLoading color="aquamarine" /> <HvLoading color="#c73aa8" /> </>Loading buttonYou can easily create a custom LoadingButton component to handle async submission operations.Submitimport { useState } from "react"; const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default function Demo() { return ( <LoadingButton onClick={() => delay(3000)}> Submit </LoadingButton> ); } function LoadingButton({ onClick, children, ...others }: HvButtonProps) { const [isLoading, setIsLoading] = useState(false); return ( <HvButton style={{ width: 120 }} disabled={isLoading} onClick={async (event) => { setIsLoading(true); await onClick?.(event); setIsLoading(false); }} {...others} > {!isLoading ? ( children ) : ( <HvLoading small hidden={!isLoading} color="inherit" /> )} </HvButton> ); }; import { useState } from "react"; const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default function Demo() { return ( <LoadingButton onClick={() => delay(3000)}> Submit </LoadingButton> ); } function LoadingButton({ onClick, children, ...others }: HvButtonProps) { const [isLoading, setIsLoading] = useState(false); return ( <HvButton style={{ width: 120 }} disabled={isLoading} onClick={async (event) => { setIsLoading(true); await onClick?.(event); setIsLoading(false); }} {...others} > {!isLoading ? ( children ) : ( <HvLoading small hidden={!isLoading} color="inherit" /> )} </HvButton> ); };Related components HvLoadingContainer HvSkeleton InputLoadingContainer