# text.indicator

A dot that marks something as new or unread, or shows a status, with no number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy makes it pulse while something is in progress

Component: [`<Text>`](https://www.prongs.dev/docs/components/text.md) · Renders: `<span>` · Role: `img` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md)

## Example

```tsx
<Text intent="text.indicator" aria-label="Indicator" />
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| A dot that marks something as new or unread, or shows a status, with no number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy makes it pulse while something is in progress | `text.indicator` (this page) |
| How many new things there are | [`text.count`](https://www.prongs.dev/docs/intents/text/count.md) |
| A status shown as a dot alone (rather than [`text.status`](https://www.prongs.dev/docs/intents/text/status.md)) | `text.indicator` (this page) |
| A status word (rather than [`text.delta`](https://www.prongs.dev/docs/intents/text/delta.md)) | `text.indicator` (this page) |
| A status dot beside a word (rather than [`layout.badged`](https://www.prongs.dev/docs/intents/layout/badged.md)) | `text.indicator` (this page) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`tone.accent`](https://www.prongs.dev/docs/intents/ui.md#tone-accent)

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How text.indicator resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`tone.accent`](https://www.prongs.dev/docs/intents/ui.md#tone-accent) — Brand text colour

  ```
  text-primary
  ```

- `text.indicator` (this page) — A dot that marks something as new or unread, or shows a status, with no number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy makes it pulse while something is in progress

  ```
  inline-block size-2 shrink-0 rounded-full bg-current
  data-[tone=success]:text-success data-[tone=info]:text-info
  data-[tone=pending]:text-pending
  data-[tone=warning]:text-warning
  data-[tone=danger]:text-destructive
  data-[tone=muted]:text-surface-muted data-[busy]:animate-pulse
  motion-reduce:animate-none
  ```

Final classes

```
text-primary inline-block size-2 shrink-0 rounded-full
bg-current data-[tone=success]:text-success
data-[tone=info]:text-info data-[tone=pending]:text-pending
data-[tone=warning]:text-warning
data-[tone=danger]:text-destructive
data-[tone=muted]:text-surface-muted data-[busy]:animate-pulse
motion-reduce:animate-none
```

Definition

```ts
'text.indicator': {
  kind: 'semantic',
  description: 'A dot that marks something as new or unread, or shows a status, with no number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy makes it pulse while something is in progress',
  refs: ['tone.accent'],
  binding: {
    element: 'span',
    ariaRole: 'img',
    classes: 'inline-block size-2 shrink-0 rounded-full bg-current data-[tone=success]:text-success data-[tone=info]:text-info data-[tone=pending]:text-pending data-[tone=warning]:text-warning data-[tone=danger]:text-destructive data-[tone=muted]:text-surface-muted data-[busy]:animate-pulse motion-reduce:animate-none',
  },
  notFor: [{ context: 'how many new things there are', instead: 'text.count' }],
},
```