***

title: If
description: >-
Show or hide content based on which instance, product, or version the reader
is viewing, or their role if your docs use authentication.
----------------------------------------------------------

The `<If>` component lets you show or hide content based on which instance, product, or version the reader is viewing, or their role if your docs use authentication.

## Variants

### By instance

Use the `instance` prop to show content only when the reader is viewing a specific [instance](/learn/docs/configuration/site-level-settings#instances-configuration). The values in the `instance` array correspond to the instance names defined in your `docs.yml`.

```jsx Markdown
<If instance={["development"]}>
  This content only appears in the development instance.
</If>

<If instance={["production"]}>
  This content only appears in the production instance.
</If>
```

### By product

Use the `products` prop to show content only when the reader is viewing a specific [product](/learn/docs/configuration/products). The values in the `products` array correspond to the product slugs defined in your `docs.yml`.

```jsx Markdown
<If products={["orchids"]}>
  This content only appears when viewing the orchids product.
</If>

<If products={["orchids", "succulents"]}>
  This content appears in both the orchids and succulents products.
</If>
```

### By version

Use the `versions` prop to show content only when the reader is viewing a specific [version](/learn/docs/configuration/versions). The values in the `versions` array correspond to the version slugs defined in your `docs.yml`.

```jsx Markdown
<If versions={["v1"]}>
  This content only appears in version v1.
</If>

<If versions={["v2"]}>
  This content only appears in version v2.
</If>
```

### By role

Use the `roles` prop to show content based on the role of an authenticated user. The values in the `roles` array correspond to the roles defined in your [role-based access control](/learn/docs/authentication/features/rbac) configuration.

```jsx Markdown
<If roles={["admin"]}>
  This content is only visible to admins.
</If>
```

### Combining conditions

You can combine `products`, `versions`, and `roles` props on a single `<If>` component. When multiple props are specified, **all** conditions must match.

```jsx Markdown
<If products={["orchids"]} versions={["v2"]}>
  This content only appears in the orchids product when viewing version v2.
</If>

<If products={["succulents"]} roles={["beta-users"]}>
  This content only appears in the succulents product for beta users.
</If>
```

### Inverting conditions

Use the `not` prop to invert any condition, showing content when the condition doesn't match.

```jsx Markdown
<If products={["legacy"]} not>
  This content appears in every product except legacy.
</If>

<If versions={["v1"]} not>
  This content appears in every version except v1.
</If>
```

## Properties

<ParamField path="instance" type="string[]" required={false}>
  Show content only when the reader is viewing one of the specified instances. Values correspond to instance names defined in your `docs.yml`.
</ParamField>

<ParamField path="products" type="string[]" required={false}>
  Show content only when the reader is viewing one of the specified products. Values correspond to product slugs defined in your `docs.yml`.
</ParamField>

<ParamField path="versions" type="string[]" required={false}>
  Show content only when the reader is viewing one of the specified versions. Values correspond to version slugs defined in your `docs.yml`.
</ParamField>

<ParamField path="roles" type="string[]" required={false}>
  Show content only when the authenticated user has one of the specified roles.
</ParamField>

<ParamField path="not" type="boolean" required={false} default="false">
  Invert the condition, showing content when the condition doesn't match.
</ParamField>

<ParamField path="children" type="string | JSX" required={true}>
  The content to show or hide based on the condition.
</ParamField>