# InterimBadge
> Marks content that is partial and still arriving: a streamed answer, a total before every source has reported, a draft figure. An outlined badge with a spinner and a word.
Source: https://docs.nasaqui.com/components/interim-badge
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/interim-badge.json
```
A small outlined badge that says a value is not final yet. It pairs a spinner with a word ("Interim" /
"مبدئي"), so the state never depends on motion alone. Stop the spinner with `pending={false}` when nothing more
is coming but the figure is still provisional.
## When to use
- A number or answer shown before all of its data has arrived (streamed AI output, partial aggregates).
- A figure that may still change: preliminary results, an unaudited month.
## When not to use
- A region that has nothing to show yet: use `LoadingState`.
- A status that is final (draft, archived): use `Badge` with a variant.
## Import
```tsx
import { InterimBadge } from "@fadymondy/nasaq/web";
```
## Quick start
```tsx
Revenue this month
```
## Anatomy
```
InterimBadge data-slot="interim-badge" data-pending (a Badge, variant="outline")
├─ Spinner aria-hidden, only while pending
└─ label
```
## API
`InterimBadgeProps extends Omit, "children">`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `ReactNode` | `"Interim"` / `"مبدئي"` by provider locale | The word shown. |
| `pending?` | `boolean` | `true` | Shows the spinner. Turn it off when no more data is coming. |
| `className?` | `string` | none | Merged onto the badge. |
## Accessibility
- The label is real text, so the state is read with the value next to it. The spinner is decorative.
- If the value updates while someone reads it, announce the final value from a `role="status"` region; the badge
itself is not a live region.
## RTL & i18n
The default label follows the Nasaq locale. The spinner and gap sit on the inline-start side in both directions.
## Styling & tokens
An outline badge with a `--nq-brand` tinted border. Extend with `className`.
## Do / Don't
- Do remove the badge once the value is final.
- Don't put it on every row of a table; mark the column header or the total instead.
## Related
- [Badge](https://docs.nasaqui.com/components/badge)
- [Spinner](https://docs.nasaqui.com/components/spinner)
- [States](https://docs.nasaqui.com/components/states)
## Lab
https://docs.nasaqui.com/?path=/docs/components-data-display-interim-badge--docs
## Code
### React
```tsx