Spinner

The Spinner component shows feedback and informs the user that the system is busy.

Size

You can pretty much configure the size of the Spinner by passing any of sm, md or lg to the size prop like so...

import { Spinner } from '@avocado-ui/react'
render(
  <>
    <Spinner size='sm' />
    <Spinner size='md' />
    <Spinner size='lg' />
  </>
)

Variants

Variants in Avocado give context with color. By default, we have the primary, success, warning & error variants. We can pass any of these to the variant prop on the Spinner component.

import { Spinner } from '@avocado-ui/react'
render(
  <>
    <Spinner variant='primary' />
    <Spinner variant='success' />
    <Spinner variant='warning' />
    <Spinner variant='error' />
  </>
)

With Other Components

Spinner components are almost never used in isolation. You can compose them with components to make your designs more robust and contextual.

Here's an example of the Spinner with Avocado's Button component to indicate a loading state.

import { Button } from '@avocado-ui/react'
render(<Button loading>Loading</Button>)

Spinner Props