> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# If

> Show or hide content based on which 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 product or version the reader is viewing, or their role if your docs use authentication.

## Variants

### By product

Use the `products` prop to show content only when the reader is viewing a specific [product](/learn/docs/configuration/products). Each value matches a product by its display name, its slug, or its id.

**`Markdown`**

```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). Each value matches a version by its display name, its slug, or its id. The default version is served at your docs basepath and has no slug of its own, so target it by its display name.

**`Markdown`**

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

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

<If versions={["v1 (Legacy)"]}>
  This content only appears in the version whose `display-name` is `v1 (Legacy)`.
</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.

**`Markdown`**

```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.

**`Markdown`**

```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.

**`Markdown`**

```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

**`products`** `string[]`

Show content only when the reader is viewing one of the specified products. Each value matches a product by its display name, its slug, or its id.

---

**`versions`** `string[]`

Show content only when the reader is viewing one of the specified versions. Each value matches a version by its display name, its slug, or its id.

---

**`roles`** `string[]`

Show content only when the authenticated user has one of the specified roles.

---

**`not`** `boolean` — default: false

Invert the condition, showing content when the condition doesn't match.

---

**`children`** `string | JSX` — required

The content to show or hide based on the condition.

---

> Show or hide content based on which product or version the reader is viewing, or their role if your docs use authentication.