# Activity Rings

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

Component · Life · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/ActivityRings/)

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.

## Example

```tsx
import { ActivityRings, Card } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <div className="tf-row" style={{ gap: 24, flexWrap: "wrap", alignItems: "flex-start" }}>
      <Card style={{ minHeight: 0 }}>
        <ActivityRings
          rings={[
            { label: "Move", value: 420, goal: 600, unit: "kcal", tint: "blush" },
            { label: "Exercise", value: 24, goal: 30, unit: "min", tint: "mint" },
            { label: "Stand", value: 9, goal: 12, unit: "h", tint: "sky" },
          ]}
        />
      </Card>
      <Card style={{ minHeight: 0 }}>
        <ActivityRings
          size={88}
          legend={false}
          label="Steps and water"
          rings={[
            { label: "Steps", value: 8400, goal: 8000, tint: "lilac" },
            { label: "Water", value: 5, goal: 8, unit: "glasses", tint: "sky" },
          ]}
        />
      </Card>
    </div>
  );
}
```

## 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. |