Logo

AueraUI

Docs

Components

Components

Loading

A wrapper that manages different UI states

Logo

Loader

The default loader is the BounceLoader which you can change using loader prop.

With Error

To handle error state use error prop alongside renderError

Empty

Use the empty prop alongside emptyComponent to to display empty state.

Custom Spinner

Use the spinner to displays a custom loading spinner while data is loading.

API Reference

isLoading

Type:

boolean

Controls the loading state. If true, a loader or spinner is displayed.

Default:

false
size

Type:

"sm" | "md" | "lg"

Specifies the size of the loader (small, medium, or large).

Default:

md
color

Type:

ColorPair

Defines the color of the loader. Accepts a valid color token.

Default:

blue-500
loader

Type:

"bounce" | "spin" | "wave"

Type of loader animation.

Default:

bounce
spinner

Type:

ReactNode

Allows passing a custom spinner component.

Default:

error

Type:

boolean

Indicates whether an error has occurred. If true, the error state is displayed.

Default:

false
empty

Type:

boolean

Indicates whether there is no data. If true, the emptyComponent is shown.

Default:

false
renderError

Type:

ReactNode

Custom component to render when an error occurs.

Default:

emptyComponent

Type:

ReactNode

Custom component to render when no data is available.

Default:

keepOut

Type:

boolean

Hide all content when set to true.

Default:

false