Component
Progress
An 8px lilac pill track filled with the purple.
npx -y github:anwarlemu/inkbox-brand-cli#release add progressMailbox storage12%
Usage
Use for a known amount (mailbox storage used, an upload, setup steps done). Put the value as text beside it (0%) and give it an aria-label. For unknown waits use Spinner.
Avoid
- Striped or gradient fills
- Progress for something that takes under a second
- A track thicker than 8px
Exports: Progress. This component is a client component.
Dependencies: radix-ui.
Example
"use client";import * as React from "react";import { Progress } from "@/components/ui/progress";export function Preview() { const [value, setValue] = React.useState(12); React.useEffect(() => { const t = setTimeout(() => setValue(64), 600); return () => clearTimeout(t); }, []); return ( <div className="grid w-full max-w-100 gap-2"> <div className="flex justify-between text-body"> <span className="text-fg">Mailbox storage</span> <span className="text-fg-muted">{value}%</span> </div> <Progress value={value} aria-label="Mailbox storage used" /> </div> );}export function Values() { return ( <div className="grid w-full max-w-100 gap-4"> <Progress value={0} aria-label="Empty" /> <Progress value={33} aria-label="A third" /> <Progress value={100} aria-label="Full" /> </div> );}Source
"use client";import * as React from "react";import { Progress as ProgressPrimitive } from "radix-ui";import { cn } from "@/lib/utils";// How far along something is (mailbox storage, an upload): an 8px lilac pill track with the purple filling it from the// left. A new value slides the fill there (300ms, the strong ease-out); with reduced motion it jumps.function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) { return ( <ProgressPrimitive.Root data-slot="progress" value={value} className={cn("relative h-2 w-full overflow-hidden rounded-pill bg-subtle", className)} {...props}> <ProgressPrimitive.Indicator data-slot="progress-indicator" className="size-full flex-1 rounded-pill bg-primary transition-[translate] duration-300 ease-out motion-reduce:transition-none" style={{ translate: `-${100 - (value ?? 0)}%` }} /> </ProgressPrimitive.Root> );}export { Progress };Reference: Extrapolated from the Inkbox console (Figma 427:2715): the Email table's Storage column, the lilac wells and the purple action color.