# react/forbid-elements

> Disallow the elements and components you choose

If your project has its own `<Button>`, a plain `<button>` skips its styles, its loading state, and its tracking. This rule reports the elements you list, so everyone uses the replacement.

The rule does nothing until you add entries to `forbid`. It checks both JSX and `React.createElement()`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/forbid-elements" = "error" # or "warn"
```

Every option, set to its default. The ones that are commented out are unset by default.

```toml bunfig.toml
[lint.rules]
"react/forbid-elements" = ["error", {
  # forbid = <list of strings or objects>,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"options": [{"forbid": ["button"]}]} */}
```jsx
<button onClick={save}>Save</button>;
```

{/* bad {"options": [{"forbid": ["button"]}]} */}
```js
React.createElement("button", { onClick: save }, "Save");
```

Not reported:

{/* good {"options": [{"forbid": ["button"]}]} */}
```jsx
<Button onClick={save}>Save</Button>;
```

## Options

```toml bunfig.toml
[lint.rules]
"react/forbid-elements" = ["error", {
  forbid = [
    "marquee",
    { element = "button", message = "use our Button component" },
  ],
}]
```

`forbid` is the only option. It's a list of element names or objects, and it's empty by default:

| Key | What it does |
| --- | --- |
| `element` | The name, as it's written in the tag: `"button"`, `"Modal"`, `"legacy.Modal"`. |
| `message` | Added to the report: `<button> is forbidden, use our Button component`. |

{/* bad {"count": 2, "options": [{"forbid": ["legacy.Modal", {"element": "button", "message": "use our Button component"}]}]} */}
```jsx
<legacy.Modal>
  <button>Close</button>
</legacy.Modal>;
```