You are viewing a PR preview for PR #1506

Agriculture Design System
Beta
Design System for the Export Service

Loading

Loading indicators inform users their action is being processed.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/loading';

Usage

Loading components can be imported via the loading entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/loading';

Props

LoadingBlanket Props
PropTypeDescription
labelReactNodeThe text to accompany the dots.
fullScreen?booleanDefault: "false"If true, the blanket will cover the entire screen.
LoadingDots Props
PropTypeDescription
aria-live?"off" | "assertive" | "polite"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
label?stringDescribes the loading element to assistive technologies.
role?AriaRoleARIA roles provide semantic meaning to content.
size?"sm" | "md" | "lg"Default: "md"The size and number of the dots.

Source

You can view the full source code for this package on Github.