Skip to main content

Spinner

The <Spinner/> component visually indicate that a process is underway and awaiting a change or outcome.

Source@matro-ui/Spinner

Import​

import { Spinner } from "matro-ui";
  • Spinner: Spinner component by itself.

Usage​

Loading...
Live Editor
 <Spinner />

Spinner Size​

To change the size of <Spinner/>, simply set the size prop (val."XS" | "S" | "M" | "L" | "XL"):

Loading...
Live Editor
 <Spinner size="XL" />

Color Scheme​

To change the color of <Spinner/>, set the colorScheme prop (val. "red" | "orange" | "yellow" | "green" | "cyangreen" | "cyanblue" | "blue" | "purple" | "pink"):

Loading...
Live Editor
<Stack>
 <Spinner size="M" colorScheme="pink" />
 <Spinner size="M" colorScheme="orange" />
 <Spinner size="M" colorScheme="cyanblue" />
</Stack>

Conditional Rendering​

If you need to hide the <Spinner/>, you can set the hidden prop to true, or use a ternary JSX statement:

Loading...
Live Editor
function demo() {
  const [visible, setVisible] = React.useState(true);
  return (
    <Stack column>


    <LabelText>Example of hiding with propㅤ<I>"hidden"</I></LabelText>
    <Spinner hidden={!visible} />

    <LabelText>Example of conditional rendering</LabelText>
    {visible ? <Spinner /> : ""}

      
      <Button 
        onClick={() => setVisible(!visible)} 
        rightIcon="⚙️">
        toggle visibility
      </Button>
    </Stack>
  );
}