---
title: Context
description: A small row of muted text and images for metadata, like a byline or a timestamp.
---

`context` displays supplementary info below a section or message: a byline, a "last updated"
timestamp, reaction counts, or small avatars. Its elements render smaller and muted, and none of
them are clickable.

<Preview
  payload={{
    blocks: [
      {
        type: "context",
        elements: [
          {
            type: "image",
            image_url: "https://api.slack.com/img/blocks/bkb_template_images/profile_1.png",
            alt_text: "Grace Hopper",
          },
          {
            type: "mrkdwn",
            text: "*Grace Hopper* and <https://example.com|2 others> reacted :+1:",
          },
          { type: "plain_text", text: "Last updated 5 min ago", emoji: true },
        ],
      },
    ],
  }}
/>

## Fields

| Prop | Type | Default | Description |
| - | - | - | - |
| `type` | `string` | - | Always `context`. |
| `elements` | `(ImageElement \| PlainTextElement \| MrkdwnElement)[]` | - | The row's content, in order. Slack allows up to 10 elements, mixing images and text freely. |
| `block_id?` | `string` | - | A unique identifier for this block. Auto-generated if omitted. Maximum length is 255 characters. |

Each image element is a small `image` object:

| Prop | Type | Default | Description |
| - | - | - | - |
| `type` | `string` | - | Always `image`. |
| `image_url` | `string` | - | A public URL to the image. |
| `alt_text` | `string` | - | A plain-text summary of the image, for screen readers. Should not contain markup. |

Text elements are ordinary [text objects](/guides/interactivity), `mrkdwn` or `plain_text`,
rendered smaller than a section's text and in a muted color.

:::note
Context elements are not interactive. There's no `action_id` and no click handler. For a row of
clickable actions that looks similar, see [context_actions](/blocks/context-actions).
:::

## Examples

### Text only

<Preview
  payload={{
    blocks: [
      {
        type: "context",
        elements: [{ type: "plain_text", text: "Last updated 5 min ago", emoji: true }],
      },
    ],
  }}
/>

### Multiple text elements

Slack lays text elements out left to right, wrapping to a new line when they don't fit:

<Preview
  payload={{
    blocks: [
      {
        type: "context",
        elements: [
          { type: "mrkdwn", text: "*Alan Turing*" },
          { type: "mrkdwn", text: "Posted in <https://example.com|#general>" },
          { type: "plain_text", text: "9:41 AM" },
        ],
      },
    ],
  }}
/>

### Mixed images and text

Images sit on the row's baseline; several in a row hug together before the text that follows them.

<Preview
  payload={{
    blocks: [
      {
        type: "context",
        elements: [
          {
            type: "image",
            image_url: "https://a.slack-edge.com/80588/img/unfurl_icons/youtube.png",
            alt_text: "YouTube",
          },
          {
            type: "image",
            image_url: "https://api.slack.com/img/blocks/bkb_template_images/profile_1.png",
            alt_text: "Ada",
          },
          {
            type: "mrkdwn",
            text: "*Ada Lovelace* and <https://example.com|2 others> reacted :+1::skin-tone-2:",
          },
          { type: "plain_text", text: "Last updated 5 min ago", emoji: true },
        ],
      },
    ],
  }}
/>

## Related

**[Context actions](/blocks/context-actions)**

A similar compact row, but built from clickable feedback and icon buttons.

**[Section](/blocks/section)**

The main text block context rows usually sit under.

**[Actions](/blocks/actions)**

A row of full interactive elements, like buttons and selects.