Spinner
Used to provide a visual cue that an action is processing
import { Spinner } from '@fidely-ui/react/spinner'
export const SpinnerBasics = () => {
return <Spinner />
}
Usage
import { Spinner } from '@fidely-ui/react'<Spinner />Examples
With Sizes
Use the size prop to change the size of the spinner.
import { HStack, Spinner } from '@fidely-ui/react'
export const SpinnerWithSizes = () => {
return (
<HStack gap="5">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</HStack>
)
}
Color
Use the colorPalette prop to change the color of the spinner.
import { Spinner } from '@fidely-ui/react/spinner'
export const SpinnerWithColor = () => {
return <Spinner colorPalette={'green'} />
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Controls the size of the spinner. |
colorPalette | string | "currentColor" | Sets the color of the spinner. |