# Budget List

> Spending per category against its limit: spent and limit, a bar, and what is left or over in words.

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

Spending per category against its limit: spent and limit, a bar, and what is left or over in words.

- The bar turns butter from 85 % and blush when over; "€42 over" says it in words too.
- `onSelect(id)` makes each category a button (to show its transactions).

## Example

```tsx
import { BudgetList, Panel } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <Panel title="November budgets" subtitle="17 days left" style={{ maxWidth: 560 }}>
      <BudgetList
        onSelect={() => {}}
        categories={[
          { id: "food", label: "Groceries", icon: "cart", tint: "mint", spent: 312, limit: 450 },
          { id: "eat", label: "Eating out", icon: "star", tint: "butter", spent: 168, limit: 180 },
          { id: "move", label: "Transport", icon: "map", tint: "sky", spent: 96, limit: 120 },
          {
            id: "fun",
            label: "Fun & hobbies",
            icon: "sparkle",
            tint: "lilac",
            spent: 142,
            limit: 100,
          },
        ]}
      />
    </Panel>
  );
}
```

## Props

### BudgetList

| Prop | Type | Notes |
| --- | --- | --- |
| `categories` | `BudgetCategory[]` | Required |
| `currency?` | `string` |  |
| `onSelect?` | `(id: string) => void` | A category was picked (to show its transactions). |
| `label?` | `string` | Accessible name (default "Budgets"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Panel

| Prop | Type | Notes |
| --- | --- | --- |
| `side?` | `boolean` |  |
| `title?` | `string` |  |
| `subtitle?` | `string` |  |
| `action?` | `ReactNode` |  |
| `children?` | `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. |