Feedback
Spinner
Indeterminate loading indicator with four sizes and semantic colors; "current" inherits the surrounding text color.
Import
import { Spinner } from "@zephora/react";Examples
Sizes
<Spinner size="xs" /> <Spinner size="sm" /> <Spinner size="md" /> <Spinner size="lg" />
Colors
`color="current"` inherits the text color of the parent.
<Spinner color="primary" />
<Spinner color="success" />
<Spinner color="warning" />
<Spinner color="danger" />
<span style={{ color: "rebeccapurple" }}>
<Spinner color="current" />
</span>API
Spinner props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "md" | Diameter scale. |
color | "primary" | "success" | "warning" | "danger" | "current" | "primary" | Semantic color; "current" inherits the text color. |
label | string | "Loading…" | Screen-reader announcement. |
unstyled | boolean | false | Headless mode — skips Zephora styling. |