Inline Loading

Beta

A small spinner or status icon with a label for a background save or check, inside a row, a card or beside a button.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add inline-loading
Also works with shadcn: npx shadcn@latest add @ritla/inline-loading
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

inline-loading.tsx

import { InlineLoading } from "@/components/ui/inline-loading";<InlineLoading status="loading">Saving changes…</InlineLoading>

Prop	Type	Default	Description
`status`	`"loading" \| "success" \| "error"`	`"loading"`	Figma's Status.
`children`	`ReactNode`	None	Figma's Label.
`hideLabel`	`boolean`	`false`	Figma's Show label off: the label stays for screen readers.