2.1.0 • Published 7 months ago

@asphalt-react/loader v2.1.0

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
7 months ago

Loader

npm npm version

Loaders provide a visual cue about tasks running in the background, like fetching data. Use Loaders when the progress of the task is non-deterministic. There are two types of loaders:

  • Loader (Dot)
  • Spinner

Loaders come in different sizes and intents.

Usage

import { Loader, Spinner } from "@asphalt-react/loader"

<Loader />
<Spinner />

Accessibility

Sizes

  • Loader supports 3 sizes - small (s), medium (m) (Default) and large (l).

Spinner

Usage in other components

Use Spinner in components like Textfield and Button to show a loading state. For consistent user-experience, ensure the size of the Spinner and the component are same.

  • Text field size XS = Spinner size XS
  • Text field size S = Spinner size S
  • Button size XS = Spinner size XS
import { Textfield } from "@asphalt-react/textfield"
import { Spinner } from "@asphalt-react/loader"

<Textfield addonEnd={<Spinner >} />

Sizes

Spinner support 6 sizes:

  • extra small (xs)
  • small (s)
  • medium (m) (Default)
  • large (l)
  • extra large (xl)
  • double extra large (xxl)

Intents

Spinner support 3 intents:

  • neutral (Default)
  • brand
  • inverse

Loader component

Props

size

Size of the Loader. Accepts "s", "m" and "l" for small, medium & large respectively

typerequireddefault
enumfalse"m"

Spinner component

Props

size

Size of the Spinner. Accepts "xs", "s", "m", "l", "xl", "xxl".

typerequireddefault
enumfalse"m"

neutral

Applies neutral intent.

typerequireddefault
boolfalsefalse

brand

Applies brand intent.

typerequireddefault
boolfalsefalse

inverse

Applies inverse intent.

typerequireddefault
boolfalsefalse