---
title: Condition
description: Renders a different set of blocks depending on the client surface that's viewing them.
---

`condition` picks one branch of blocks to render based on `client` conditions, and falls back to
`default` when none match. It's a library-invented construct for previewing client-conditional
payloads; Slack doesn't document a public `condition` block type.

<Preview
  payload={{
    blocks: [
      {
        type: "condition",
        cases: [
          {
            conditions: [{ type: "client", op: "=", value: "desktop" }],
            blocks: [{ type: "section", text: { type: "mrkdwn", text: "*Desktop branch*" } }],
          },
          {
            conditions: [{ type: "client", op: "=", value: "ios" }],
            blocks: [{ type: "section", text: { type: "mrkdwn", text: "*iOS branch*" } }],
          },
          {
            conditions: [{ type: "client", op: "=", value: "android" }],
            blocks: [{ type: "section", text: { type: "mrkdwn", text: "*Android branch*" } }],
          },
        ],
        default: [{ type: "section", text: { type: "mrkdwn", text: "*Default branch*" } }],
      },
    ],
  }}
/>

Since this renderer only ever simulates Slack's desktop client, the example above always shows the
desktop branch, the same way it would look in Slack's own Builder preview.

## Fields

| Prop | Type | Default | Description |
| - | - | - | - |
| `type` | `string` | - | Always `condition`. |
| `cases?` | `{ conditions: ConditionClause[]; blocks: Block[] }[]` | - | Branches, tested in order. The first case whose conditions all match wins, and its `blocks` render. |
| `default?` | `Block[]` | - | Blocks rendered when no case matches. |

### `ConditionClause`

| Prop | Type | Default | Description |
| - | - | - | - |
| `type` | `string` | - | The condition kind. Only `"client"` is evaluated; any other value never matches. |
| `op?` | `"=" \| "!="` | `"="` | Comparison against `value`. Omitted is treated the same as `"="`. |
| `value?` | `string` | - | The client to compare against, e.g. `"desktop"`, `"ios"`, `"android"`. |

:::note
This library always evaluates `client` as `"desktop"`, matching how Slack's Block Kit Builder
previews payloads. There's no way to preview the `ios` or `android` branches here. Inspect the JSON
tab instead to check what a mobile client would receive.
:::

## Examples

### Client branches with a default

The preview above defines a branch per client plus a `default`, and only the desktop branch renders.

### Negated condition

<Preview
  payload={{
    blocks: [
      {
        type: "condition",
        cases: [
          {
            conditions: [{ type: "client", op: "!=", value: "desktop" }],
            blocks: [{ type: "section", text: { type: "mrkdwn", text: "*Not desktop*" } }],
          },
        ],
        default: [{ type: "section", text: { type: "mrkdwn", text: "*Desktop (default)*" } }],
      },
    ],
  }}
/>

`op: "!="` matches every client except the given `value`. Here the desktop client never matches, so
the `default` branch renders instead.

## Related

**[Fallback canary](/blocks/fallback-canary)**

Renders substitute blocks when a client doesn't recognize a block type at all.

**[Container](/blocks/container)**

A common place to nest conditional content alongside static blocks.