---
title: Migrating from legacy StrataKit
description: Learn how to migrate from legacy StrataKit components to StrataKit MUI
---

import { Steps } from "@astrojs/starlight/components";

This guide provides the necessary steps for migrating from legacy StrataKit components (e.g. `@stratakit/bricks`) to [MUI](https://mui.com/material-ui/getting-started/)-based StrataKit implementation.

:::note
Migration to StrataKit MUI can be done gradually, since both libraries can coexist in the same project.
:::

## Migration steps

<Steps>

1. **Set up StrataKit MUI**

   Follow the [set up StrataKit MUI guide](/getting-started/develop/) to install the necessary dependencies and set up your project.

2. **Replace `@stratakit/foundations` with `@stratakit/mui`**

   Replace the [`Root`](/reference/foundations/Root) component from `@stratakit/foundations` with the `Root` component from `@stratakit/mui`.
   This unlocks the ability to use [MUI components](https://mui.com/material-ui/all-components/) within the `Root`. Legacy StrataKit components nested within the `Root` will continue to work, enabling gradual migration.

   ```diff
   - import { Root } from "@stratakit/foundations";
   + import { Root } from "@stratakit/mui";
   ```

   Replace usage of [`Icon`](/reference/foundations/Icon) component from `@stratakit/foundations` with the `Icon` component from `@stratakit/mui`.
   Continue using icons from the `@stratakit/icons` package.

   ```diff
   - import { Icon } from "@stratakit/foundations";
   + import { Icon } from "@stratakit/mui";
   ```

   Once all direct usage of `@stratakit/foundations` has been replaced, it is safe to remove the dependency.

   ```console
   npm uninstall @stratakit/foundations
   ```

3. **Replace `@stratakit/bricks` with `@mui/material`**

   Replace the usage of components from `@stratakit/bricks` with their MUI counterparts. Refer to the [use MUI components](#use-mui-components) section below for the component mapping and additional guidance.

   ```diff
   - import { Button } from "@stratakit/bricks";
   + import Button from "@mui/material/Button";
   ```

   Once all usage of `@stratakit/bricks` has been replaced, it is safe to remove the dependency.

   ```console
   npm uninstall @stratakit/bricks
   ```

4. **Continue using `@stratakit/structures`**

   Replace the usage of [`AccordionItem`](/reference/structures/AccordionItem/), [`Banner`](/reference/structures/Banner/) and [`Chip`](/reference/structures/Chip/) components from `@stratakit/structures` package with their [MUI counterparts](#use-mui-components).

   ```diff
   - import { Chip } from "@stratakit/structures";
   + import Chip from "@mui/material/Chip";
   ```

   Continue using other components from [`@stratakit/structures`](/reference#structures) package, as they are not affected by the migration to StrataKit MUI.

</Steps>

## Use MUI components

Replace legacy StrataKit component usage with their [MUI counterparts](https://mui.com/material-ui/all-components/).

| StrataKit component                                            | MUI component                                                          |
| -------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [AccordionItem](/reference/structures/AccordionItem/)          | [Accordion](https://mui.com/material-ui/api/accordion/)                |
| [Anchor](/reference/bricks/Anchor)                             | [Link](https://mui.com/material-ui/api/link/)                          |
| [Avatar](/reference/bricks/Avatar)                             | [Avatar](https://mui.com/material-ui/api/avatar/)                      |
| [Badge](/reference/bricks/Badge)                               | [Badge](https://mui.com/material-ui/api/badge/)                        |
| [Banner](/reference/structures/Banner)                         | [Alert](https://mui.com/material-ui/api/alert/)                        |
| [Button](/reference/bricks/Button)                             | [Button](https://mui.com/material-ui/api/button/)                      |
| [Checkbox](/reference/bricks/Checkbox)                         | [Checkbox](https://mui.com/material-ui/api/checkbox/)                  |
| [Chip](/reference/structures/Chip)                             | [Chip](https://mui.com/material-ui/api/chip/)                          |
| [Description](/reference/bricks/Description)                   | [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)    |
| [Divider](/reference/bricks/Divider)                           | [Divider](https://mui.com/material-ui/api/divider/)                    |
| [Field](/reference/bricks/Field)                               | [FormControl](https://mui.com/material-ui/api/form-control/)           |
| [IconButton](/reference/bricks/IconButton)                     | [IconButton](https://mui.com/material-ui/api/icon-button/)             |
| [Kbd](/reference/bricks/Kbd)                                   | -                                                                      |
| [Label](/reference/bricks/Label)                               | [FormLabel](https://mui.com/material-ui/api/form-label/)               |
| [ProgressBar](/reference/bricks/Progress#Progress.ProgressBar) | [LinearProgress](https://mui.com/material-ui/api/linear-progress/)     |
| [Radio](/reference/bricks/Radio)                               | [Radio](https://mui.com/material-ui/api/radio/)                        |
| [Select](/reference/bricks/Select)                             | [Select](https://mui.com/material-ui/api/select/)                      |
| [Skeleton](/reference/bricks/Skeleton)                         | [Skeleton](https://mui.com/material-ui/api/skeleton/)                  |
| [Spinner](/reference/bricks/Spinner)                           | [CircularProgress](https://mui.com/material-ui/api/circular-progress/) |
| [Switch](/reference/bricks/Switch)                             | [Switch](https://mui.com/material-ui/api/switch/)                      |
| [Table](/reference/bricks/Table)                               | [Table](https://mui.com/material-ui/api/table/)                        |
| [Text](/reference/bricks/Text)                                 | [Typography](https://mui.com/material-ui/api/typography/)              |
| [TextBox](/reference/bricks/TextBox)                           | [TextField](https://mui.com/material-ui/api/text-field/)               |
| [Tooltip](/reference/bricks/Tooltip)                           | [Tooltip](https://mui.com/material-ui/api/tooltip/)                    |
| [VisuallyHidden](/reference/bricks/VisuallyHidden)             | -                                                                      |

:::tip
Read additional [StrataKit MUI component documentation](/components/overview/) for more details on usage and customization.
:::

### AccordionItem

- Replace the `AccordionItem` component from `@stratakit/structures` with the `Accordion` component from `@mui/material`. See [Accordion examples](/components/accordion/) for reference.
- Change [`AccordionItem.Root`](/reference/structures/AccordionItem/#AccordionItem.Root) component to [`Accordion`](https://mui.com/material-ui/api/accordion/) component.
- Change [`AccordionItem.Header`](/reference/structures/AccordionItem/#AccordionItem.Header) component to [`AccordionSummary`](https://mui.com/material-ui/api/accordion-summary/) component.
- Change [`AccordionItem.Content`](/reference/structures/AccordionItem/#AccordionItem.Content) component to [`AccordionDetails`](https://mui.com/material-ui/api/accordion-details/) component.
- Change [`AccordionItem.Label`](/reference/structures/AccordionItem/#AccordionItem.Label) component to [`Typography`](https://mui.com/material-ui/api/typography/) component.
- Remove usage of [`AccordionItem.Button`](/reference/structures/AccordionItem/#AccordionItem.Button) component. Button is configured via [`AccordionSummary`](https://mui.com/material-ui/api/accordion-summary/) component instead.
- Remove usage of [`AccordionItem.Decoration`](/reference/structures/AccordionItem/#AccordionItem.Decoration) component. Provide custom content to [`AccordionSummary`](https://mui.com/material-ui/api/accordion-summary/) component instead.
- Use [`expandIconWrapper`](https://mui.com/material-ui/api/accordion-summary/#AccordionSummary-css-MuiAccordionSummary-expandIconWrapper) slot to replace usage of [`AccordionItem.Marker`](/reference/structures/AccordionItem/#AccordionItem.Marker) component.
- Use [`heading`](https://mui.com/material-ui/api/accordion/#Accordion-css-MuiAccordion-heading) slot to replace usage of [`AccordionItem.Heading`](/reference/structures/AccordionItem/#AccordionItem.Heading) component.

### Anchor

- Replace the `Anchor` component from `@stratakit/bricks` with the `Link` component from `@mui/material`. See [Link examples](/components/link/) for reference.
- Change [`tone`](/reference/bricks/Anchor#Anchor.tone) prop to [`color`](https://mui.com/material-ui/api/link/#link-prop-color) prop.

  | `tone` value | `color` value |
  | ------------ | ------------- |
  | `"neutral"`  | `"secondary"` |
  | `"accent"`   | `"primary"`   |

- Usage of compositional API is not available. [External marker](/reference/bricks/Anchor#Anchor.ExternalMarker) is not supported.

### Avatar

- Replace the `Avatar` component from `@stratakit/bricks` with the `Avatar` component from `@mui/material`. See [Avatar examples](/components/avatar/) for reference.
- Change [`image`](/reference/bricks/Avatar#Avatar.image) prop to:
  - [`children`](https://mui.com/material-ui/api/avatar/#avatar-prop-children) prop for [icon avatars](https://mui.com/material-ui/react-avatar/#icon-avatars).
  - [`src`](https://mui.com/material-ui/api/avatar/#avatar-prop-src) prop for [image avatars](https://mui.com/material-ui/react-avatar/#image-avatars).
- Change [`initials`](/reference/bricks/Avatar#Avatar.initials) prop to [`children`](https://mui.com/material-ui/api/avatar/#avatar-prop-children) prop.
- Change [`size`](/reference/bricks/Avatar#Avatar.size) prop to explicit `height` and `width` CSS properties.

### Badge

- Replace the `Badge` component from `@stratakit/bricks` with the `Badge` component from `@mui/material`. See [Badge examples](/components/badge/) for reference.
- Use `inline` prop to display the badge in [normal document flow](/components/badge/#inline).
- Change [`tone`](/reference/bricks/Badge#Badge.tone) prop to [`color`](https://mui.com/material-ui/api/badge/#badge-prop-color) prop.

  | `tone` value  | `color` value |
  | ------------- | ------------- |
  | `"neutral"`   | `"secondary"` |
  | `"accent"`    | `"primary"`   |
  | `"info"`      | `"info"`      |
  | `"positive"`  | `"success"`   |
  | `"attention"` | `"warning"`   |
  | `"critical"`  | `"error"`     |

- Remove [`variant`](/reference/bricks/Badge#Badge.variant) prop. Only `"standard"` variant is supported by MUI component.

### Banner

- Replace the `Banner` component from `@stratakit/structures` with the `Alert` component from `@mui/material`. See [Alert examples](/components/alert/) for reference.
- Change [`Banner`](/reference/structures/Banner#Banner), [`Banner.Root`](/reference/structures/Banner#Banner.Root) components to [`Alert`](https://mui.com/material-ui/api/alert/) component.
- Change usage of [`label`](/reference/structures/Banner#Banner.label) prop and [`Banner.Label`](/reference/structures/Banner#Banner.Label) component to [`AlertTitle`](https://mui.com/material-ui/api/alert-title/) component.
- Change usage of [`message`](/reference/structures/Banner#Banner.message) prop and [`Banner.Message`](/reference/structures/Banner#Banner.Message) component to [`children`](https://mui.com/material-ui/api/alert/#alert-prop-children) prop.
- Change usage of [`actions`](/reference/structures/Banner#Banner.actions) prop and [`Banner.Actions`](/reference/structures/Banner#Banner.Actions) component to [`action`](https://mui.com/material-ui/api/alert/#alert-prop-action) prop. Customize action container via [`action`](https://mui.com/material-ui/api/alert/#Alert-css-MuiAlert-action) slot.
- Change usage of [`icon`](/reference/structures/Banner#Banner.icon) prop and [`Banner.Icon`](/reference/structures/Banner#Banner.Icon) component to [`icon`](https://mui.com/material-ui/api/alert/#alert-prop-icon) prop. Customize icon container via [`icon`](https://mui.com/material-ui/api/alert/#Alert-css-MuiAlert-icon) slot.
- Change [`onDismiss`](/reference/structures/Banner#Banner.onDismiss) prop to [`onClose`](https://mui.com/material-ui/api/alert/#alert-prop-onClose) prop.
- Change usage of [`Banner.DismissButton`](/reference/structures/Banner#Banner.DismissButton) component to [`onClose`](https://mui.com/material-ui/api/alert/#alert-prop-onClose), [`closeText`](https://mui.com/material-ui/api/alert/#alert-prop-closeText) props and [`closeButton`](https://mui.com/material-ui/api/alert/#Alert-css-closeButton), [`closeIcon`](https://mui.com/material-ui/api/alert/#Alert-css-closeIcon) slots.
- Change [`tone`](/reference/structures/Banner#Banner.tone) prop to [`severity`](https://mui.com/material-ui/api/alert/#alert-prop-severity) prop.

  | `tone` value  | `severity` value |
  | ------------- | ---------------- |
  | `"neutral"`   | `"success"`      |
  | `"info"`      | `"info"`         |
  | `"positive"`  | `"success"`      |
  | `"attention"` | `"warning"`      |
  | `"critical"`  | `"error"`        |

- Update value of [`variant`](/reference/structures/Banner#Banner.variant) prop.

  | Before      | After        |
  | ----------- | ------------ |
  | `"outline"` | `"outlined"` |

### Button

- Replace the `Button` component from `@stratakit/bricks` with the `Button` component from `@mui/material`. See [Button examples](/components/button/) for reference.
- Change [`tone`](/reference/bricks/Button#Button.tone) prop to [`color`](https://mui.com/material-ui/api/button/#button-prop-color) prop.

  | `tone` value | `color` value |
  | ------------ | ------------- |
  | `"neutral"`  | `"secondary"` |
  | `"accent"`   | `"primary"`   |

- Update value of [`variant`](/reference/bricks/Button#Button.variant) prop.

  | Before      | After         |
  | ----------- | ------------- |
  | `"solid"`   | `"contained"` |
  | `"outline"` | `"outlined"`  |
  | `"ghost"`   | `"text"`      |

- Use [`startIcon`](https://mui.com/material-ui/api/button/#button-prop-startIcon) and [`endIcon`](https://mui.com/material-ui/api/button/#button-prop-endIcon) props to [display icons](/components/button/#icons).

### Checkbox

- Replace the `Checkbox` component from `@stratakit/bricks` with the `Checkbox` component from `@mui/material`. See [Checkbox examples](/components/checkbox/) for reference.
- Use [`FormControlLabel`](https://mui.com/material-ui/api/form-control-label/) component to label the checkbox.

### Chip

- Replace the `Chip` component from `@stratakit/structures` with the `Chip` component from `@mui/material`. See [Chip examples](/components/chip/) for reference.
- Change [`Chip`](/reference/structures/Chip#Chip), [`Chip.Root`](/reference/structures/Chip#Chip.Root) components to [`Chip`](https://mui.com/material-ui/api/chip/) component.
- Change usage of [`label`](/reference/structures/Chip#Chip.label) prop and [`Chip.Label`](/reference/structures/Chip#Chip.Label) component to [`label`](https://mui.com/material-ui/api/chip/#chip-prop-label) prop. Customize label container via [`label`](https://mui.com/material-ui/api/chip/#Chip-css-MuiChip-label) slot.
- Change [`onDismiss`](/reference/structures/Chip#Chip.onDismiss) prop to [`onDelete`](https://mui.com/material-ui/api/chip/#chip-prop-onDelete) prop.
- Change usage of [`Chip.DismissButton`](/reference/structures/Chip#Chip.DismissButton) component to [`onDelete`](https://mui.com/material-ui/api/chip/#chip-prop-onDelete), [`deleteIcon`](https://mui.com/material-ui/api/chip/#chip-prop-deleteIcon) props.
- Update value of [`variant`](/reference/structures/Chip#Chip.variant) prop.

  | Before      | After        |
  | ----------- | ------------ |
  | `"outline"` | `"outlined"` |
  | `"solid"`   | `"filled"`   |

### Description

- Replace the `Description` component from `@stratakit/bricks` with the `FormHelperText` component from `@mui/material`.
- Remove [`tone`](/reference/bricks/Description#Description.tone) prop. Instead use [`error`](https://mui.com/material-ui/api/form-helper-text/#form-helper-text-prop-error) prop to display the message in an error state.

### Divider

- Replace the `Divider` component from `@stratakit/bricks` with the `Divider` component from `@mui/material`. See [Divider examples](/components/divider/) for reference.
- Remove unsupported [`bleed`](/reference/bricks/Divider#Divider.bleed) prop.
- Replace unsupported [`presentational`](/reference/bricks/Divider#Divider.presentational) prop with a [presentational Divider](/components/divider/#presentational-dividers) that overrides the element type (`render={<div />}`) and role (`role="presentation"`).

### Field

- Replace the `Field` component from `@stratakit/bricks` with the `FormControl` component from `@mui/material`.
- Change [`Field.Root`](/reference/bricks/Field#Field.Root), [`Field.Label`](/reference/bricks/Field#Field.Label) and [`Field.Control`](/reference/bricks/Field#Field.Control) components with [`FormControlLabel`](https://mui.com/material-ui/api/form-control-label/).
- Use [`FormControl`](https://mui.com/material-ui/api/form-control/), [`FormLabel`](https://mui.com/material-ui/api/form-label/) and [`FormGroup`](https://mui.com/material-ui/api/form-group/) components to [group multiple fields](/components/checkbox/#group).
- Change [`Field.Description`](/reference/bricks/Field#Field.Description) component with [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) component to [display a description](/components/checkbox/#group).
- Change [`Field.ErrorMessage`](/reference/bricks/Field#Field.ErrorMessage) component with [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) component to [display an error message](/components/checkbox/#error).

### Kbd

- Change `Kbd` component to a [`<kbd>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd).

### IconButton

- Replace the `IconButton` component from `@stratakit/bricks` with the `IconButton` component from `@mui/material`. See [IconButton examples](/components/iconbutton/) for reference.
- Change [`icon`](/reference/bricks/IconButton#IconButton.icon) prop to [`children`](https://mui.com/material-ui/api/icon-button/#icon-button-prop-children) prop.
- Remove [`active`](/reference/bricks/IconButton#IconButton.active) prop. Use [`ToggleButton`](https://mui.com/material-ui/api/toggle-button/) component to display a toggle button.
- Remove [`dot`](/reference/bricks/IconButton#IconButton.dot) prop. Wrap the icon in a [`Badge`](https://mui.com/material-ui/api/badge/) component to [display a badge](/components/iconbutton/#badge).
- Remove [`labelVariant`](/reference/bricks/IconButton#IconButton.labelVariant) prop. Use a visually hidden label, without a wrapper [`Tooltip`](https://mui.com/material-ui/api/tooltip/).
- Remove [`variant`](/reference/bricks/IconButton#IconButton.variant) prop. Only `"ghost"` variant is supported by MUI component.

### ProgressBar

- Replace the `ProgressBar` component from `@stratakit/bricks` with the `LinearProgress` component from `@mui/material`. See [LinearProgress examples](/components/linearprogress) for reference.
- Remove unsupported [`size`](/reference/bricks/Progress#Progress.ProgressBar.size) prop.
- Change [`tone`](/reference/bricks/Progress#Progress.ProgressBar.tone) prop to [`color`](https://mui.com/material-ui/api/linear-progress/#linear-progress-prop-color) prop.

  | `tone` value | `color` value |
  | ------------ | ------------- |
  | `"neutral"`  | `"secondary"` |
  | `"accent"`   | `"primary"`   |

### Radio

- Replace the `Radio` component from `@stratakit/bricks` with the `Radio` component from `@mui/material`. See [Radio examples](/components/radio/) for reference.
- Use [`FormControlLabel`](https://mui.com/material-ui/api/form-control-label/) component to label the radio control.
- Use `RadioGroup` component to group multiple radio buttons.

### Select

- Replace the `Select` component from `@stratakit/bricks` with the `Select` or `NativeSelect` component from `@mui/material`. See [Select examples](/components/select/) for reference.
- Change [`Select.HtmlSelect`](/reference/bricks/Select#Select.HtmlSelect) component to [`NativeSelect`](https://mui.com/material-ui/api/native-select/) or [`Select`](https://mui.com/material-ui/api/select/) component.
- Remove [`variant`](/reference/bricks/Select#Select.HtmlSelect.variant) prop. Only `"outlined"` variant is supported by MUI component.

### Skeleton

- Replace the `Skeleton` component from `@stratakit/bricks` with the `Skeleton` component from `@mui/material`. See [Skeleton examples](/components/skeleton/) for reference.
- Remove [`size`](/reference/bricks/Skeleton#Skeleton.size) prop. Use `font-size` CSS property or `width` and `height` properties based on the [skeleton variant](https://mui.com/material-ui/react-skeleton/#variants).
- Update value of [`variant`](/reference/bricks/Skeleton#Skeleton.variant) prop.

  | Before     | After       |
  | ---------- | ----------- |
  | `"text"`   | `"text"`    |
  | `"object"` | `"rounded"` |

### Spinner

- Replace the `Spinner` component from `@stratakit/bricks` with the `CircularProgress` component from `@mui/material`. See [CircularProgress examples](/components/circularprogress) for reference.
- Change the value of [`size`](/reference/bricks/Spinner#Spinner.size) prop. MUI [`size`](https://mui.com/material-ui/api/circular-progress/#circular-progress-prop-size) prop uses pixel values or custom units when a string is provided.
- Change [`tone`](/reference/bricks/Spinner#Spinner.tone) prop to [`color`](https://mui.com/material-ui/api/circular-progress/#circular-progress-prop-color) prop.

  | `tone` value | `color` value |
  | ------------ | ------------- |
  | `"neutral"`  | `"secondary"` |
  | `"accent"`   | `"primary"`   |

### Switch

- Replace the `Switch` component from `@stratakit/bricks` with the `Switch` component from `@mui/material`. See [Switch examples](/components/switch/) for reference.
- Use [`FormControlLabel`](https://mui.com/material-ui/api/form-control-label/) component to label the switch control.

### Table

- Replace the `Table` components from `@stratakit/bricks` with the `Table` components from `@mui/material`. See [Table examples](/components/table/) for reference.
- Change [`Table.HtmlTable`](/reference/bricks/Table#Table.HtmlTable) and [`Table.CustomTable`](/reference/bricks/Table#Table.CustomTable) components to [`Table`](https://mui.com/material-ui/api/table/) component.
- Change [`Table.Header`](/reference/bricks/Table#Table.Header) component to [`TableHead`](https://mui.com/material-ui/api/table-head/) component.
- Change [`Table.Body`](/reference/bricks/Table#Table.Body) component to [`TableBody`](https://mui.com/material-ui/api/table-body/) component.
- Change [`Table.Row`](/reference/bricks/Table#Table.Row) component to [`TableRow`](https://mui.com/material-ui/api/table-row/) component.
- Change [`Table.Cell`](/reference/bricks/Table#Table.Cell) component to [`TableCell`](https://mui.com/material-ui/api/table-cell/) component.
- Replace [`Table.Caption`](/reference/bricks/Table#Table.Caption) with a native HTML [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption) element inside [`Table`](https://mui.com/material-ui/api/table/) component.

### Text

- Replace the `Text` component from `@stratakit/bricks` with the `Typography` component from `@mui/material`. See [Typography examples](/components/typography/) for reference.
- If using a heading variant, make sure to set the `render` prop to the most appropriate element based on your application structure.

### TextBox

- Replace the `TextBox` component from `@stratakit/bricks` with the `TextField` component from `@mui/material`. See [TextField examples](/components/textfield/) for reference.
- Set [`label`](https://mui.com/material-ui/api/text-field/#text-field-prop-label) prop instead of the [`Field.Label`](/reference/bricks/Field#Field.Label) component to display a label.
- Set `startAdornment` or `endAdornment` properties of `slotProps.input` instead of the [`TextBox.Icon`](/reference/bricks/TextBox#TextBox.Icon) component to [display an icon](/components/textfield/).
- Set [`multiline`](https://mui.com/material-ui/api/text-field/#text-field-prop-multiline) prop to display [a multi-line text area](/components/textfield/#multiline), instead of using the [`TextBox.Textarea`](/reference/bricks/TextBox#TextBox.Textarea) component.
- Use [`helperText`](https://mui.com/material-ui/api/text-field/#text-field-prop-helperText) prop to display a description, instead of using the [`Field.Description`](/reference/bricks/Field#Field.Description) component. Additionally, set [`error`](https://mui.com/material-ui/api/text-field/#text-field-prop-error) prop to display [an error](/components/textfield/#error), instead of using the [`Field.ErrorMessage`](/reference/bricks/Field#Field.ErrorMessage) component.

### Tooltip

- Replace the `Tooltip` component from `@stratakit/bricks` with the `Tooltip` component from `@mui/material`. See [Tooltip examples](/components/tooltip/) for reference.
- Change [`content`](/reference/bricks/Tooltip#Tooltip.content) prop to [`title`](https://mui.com/material-ui/api/tooltip/#tooltip-prop-title) prop.
- Change [`type`](/reference/bricks/Tooltip#Tooltip.type) prop with a `"label"` value to [`describeChild`](https://mui.com/material-ui/api/tooltip/#tooltip-prop-describeChild) prop with a `false` value: `type="label"` → `describeChild={false}`.
- `"none"` value of [`type`](/reference/bricks/Tooltip#Tooltip.type) is not supported. Manually override `aria-` attributes instead.

### VisuallyHidden

- Use [`visuallyHidden`](https://mui.com/system/screen-readers/#visually-hidden-elements) CSS utility instead.

## Common props

### `accessibleWhenDisabled` prop

- [`accessibleWhenDisabled`](/reference/foundations/Utils#FocusableProps.accessibleWhenDisabled) prop is not supported.

### `render` prop

- Continue using [`render`](/reference/foundations/Utils#BaseProps.render) prop to customize the rendering of the components. `render` prop is preferred over the [`component`](https://mui.com/material-ui/guides/composition/#component-prop) prop where available.
