Skip to content

Twentyfirst UIHalo

HaloPro

Activity Rings

Life · ActivityRings, Card

View as Markdown

Concentric progress rings for daily goals (move, exercise, stand, steps, water) with a legend.

rings lists outer ring first: label, value, goal, unit, tint.
The rings carry one accessible description with every value and goal; legend={false} hides the visible legend.

PreviewCode

Props

ActivityRings

Prop	Type	Notes
`rings`	`ActivityRing[]`	Outer ring first.
`size?`	`number`	Diameter of the rings (default 132).
`legend?`	`boolean`	Hide the legend beside the rings.
`label?`	`string`	Accessible name (default "Activity").
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Card

Prop	Type	Notes
`title?`	`string`
`description?`	`string`
`meta?`	`string[]`
`corner?`	`ReactNode`
`status?`	`ReactNode`
`actions?`	`ReactNode[]`
`tint?`	`Tint \| "surface"`
`onClick?`	`() => void`
`children?`	`ReactNode`
`eyebrow?`	`ReactNode`
`surface?`	`Surface`	`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.