# text.topic

Names a topic or category an item belongs to: News, Science. Sits one surface level above what holds it. A link inside it covers the whole chip; without one, a link covering its item covers the chip too

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

## Example

```tsx
<Text intent="text.topic">Pack my box with five dozen liquor jugs.</Text>
```

## Choosing between neighbours

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

| If it is for… | Use |
|---|---|
| Names a topic or category an item belongs to: News, Science. Sits one surface level above what holds it. A link inside it covers the whole chip; without one, a link covering its item covers the chip too | `text.topic` (this page) |
| Naming a form field or setting | [`text.label`](https://www.prongs.dev/docs/intents/text/label.md) |
| A topic or category (rather than [`text.status`](https://www.prongs.dev/docs/intents/text/status.md)) | `text.topic` (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: [`typography.label`](https://www.prongs.dev/docs/intents/ui.md#typography-label), [`tone.muted`](https://www.prongs.dev/docs/intents/ui.md#tone-muted)

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

- [`typography.label`](https://www.prongs.dev/docs/intents/ui.md#typography-label) — Small, slightly heavy type for names of things

  ```
  text-sm
  ```

- [`tone.muted`](https://www.prongs.dev/docs/intents/ui.md#tone-muted) — Secondary text colour, readable on every surface

  ```
  text-surface-muted
  ```

- `text.topic` (this page) — Names a topic or category an item belongs to: News, Science. Sits one surface level above what holds it. A link inside it covers the whole chip; without one, a link covering its item covers the chip too

  ```
  rounded-full bg-surface-hover has-[a]:relative px-2 py-0.5
  text-xs [&_a]:after:absolute [&_a]:after:inset-0
  [&_a]:after:rounded-full [&_a]:after:content-[''] ring-1
  ring-current/15 ring-inset has-[a:hover]:ring-current/35
  data-[tone=info]:bg-info/12 data-[tone=info]:text-info
  data-[tone=warning]:bg-warning/12
  data-[tone=warning]:text-warning
  data-[tone=danger]:bg-destructive/12
  data-[tone=danger]:text-destructive
  data-[profile=ui]:bg-profile-ui/12
  data-[profile=ui]:text-profile-ui
  data-[profile=errors]:bg-profile-errors/12
  data-[profile=errors]:text-profile-errors
  data-[profile=logs]:bg-profile-logs/12
  data-[profile=logs]:text-profile-logs
  data-[kind=component]:bg-component/12
  data-[kind=component]:text-component
  [&_a]:text-[color:color-mix(in_oklch,currentColor_55%,var(--foreground))]
  [&_a:hover]:text-[color:color-mix(in_oklch,currentColor_55%,var(--foreground))]
  ```

Final classes

```
text-surface-muted rounded-full bg-surface-hover
has-[a]:relative px-2 py-0.5 text-xs [&_a]:after:absolute
[&_a]:after:inset-0 [&_a]:after:rounded-full
[&_a]:after:content-[''] ring-1 ring-current/15 ring-inset
has-[a:hover]:ring-current/35 data-[tone=info]:bg-info/12
data-[tone=info]:text-info data-[tone=warning]:bg-warning/12
data-[tone=warning]:text-warning
data-[tone=danger]:bg-destructive/12
data-[tone=danger]:text-destructive
data-[profile=ui]:bg-profile-ui/12
data-[profile=ui]:text-profile-ui
data-[profile=errors]:bg-profile-errors/12
data-[profile=errors]:text-profile-errors
data-[profile=logs]:bg-profile-logs/12
data-[profile=logs]:text-profile-logs
data-[kind=component]:bg-component/12
data-[kind=component]:text-component
[&_a]:text-[color:color-mix(in_oklch,currentColor_55%,var(--foreground))]
[&_a:hover]:text-[color:color-mix(in_oklch,currentColor_55%,var(--foreground))]
```

Definition

```ts
'text.topic': {
  kind: 'semantic',
  description: 'Names a topic or category an item belongs to: News, Science. Sits one surface level above what holds it. A link inside it covers the whole chip; without one, a link covering its item covers the chip too',
  refs: ['typography.label', 'tone.muted'],
  binding: {
    element: 'span',
    classes: 'rounded-full bg-surface-hover has-[a]:relative px-2 py-0.5 text-xs [&_a]:after:absolute [&_a]:after:inset-0 [&_a]:after:rounded-full [&_a]:after:content-[\'\'] ring-1 ring-current/15 ring-inset has-[a:hover]:ring-current/35 data-[tone=info]:bg-info/12 data-[tone=info]:text-info data-[tone=warning]:bg-warning/12 data-[tone=warning]:text-warning data-[tone=danger]:bg-destructive/12 data-[tone=danger]:text-destructive data-[profile=ui]:bg-profile-ui/12 data-[profile=ui]:text-profile-ui data-[profile=errors]:bg-profile-errors/12 data-[profile=errors]:text-profile-errors data-[profile=logs]:bg-profile-logs/12 data-[profile=logs]:text-profile-logs data-[kind=component]:bg-component/12 data-[kind=component]:text-component [&_a]:text-[color:color-mix(in_oklch,currentColor_55%,var(--foreground))] [&_a:hover]:text-[color:color-mix(in_oklch,currentColor_55%,var(--foreground))]',
  },
  notFor: [{ context: 'naming a form field or setting', instead: 'text.label' }],
},
```