# Upgrade to v2

v2 of the React SDK is in beta. This page tracks what you have to change when moving from
v1. The client API is unchanged so far; the breaking changes to date are all in the
component layer, where the SDK is moving onto the design system.

## Install the beta

v2 publishes to the `beta` npm tag. v1 keeps `latest`, so an unpinned install stays on v1.

```bash
yarn add @stream-io/video-react-sdk@beta
```

## Quick migration checklist

1. Install the beta and build. Client, call and state APIs need no changes.
2. Replace `TextButton` with `Button`, and `IconButton`'s `enabled` prop with `active`.
3. Replace `variant="success"`, `variant="danger"` and `variant="active"`.
4. Search your CSS for the removed `str-video__` button classes and the eight
   `--str-video__composite-button__button-group*` variables.
5. Re-check any spacing you derived from `--str-video__spacing-*`: the scale shifted.
6. Look at your call controls on screen. Sizing changed even where your code did not.

## The button family is now one component

Before v2 there were three unrelated components: `.str-video__button` was a full-width
CTA, `IconButton` rendered a bare padded icon with no background or state, and only
`CompositeButton` produced the round call-control pill.

They are now one token-driven primitive. `.str-video__button` carries the pill,
`IconButton` is its icon-only shape, and `CompositeButton` composes it into a call control
with an optional caption and split menu. `Button` is exported for the first time.

### Renamed and removed

| Removed                                     | Replacement                           |
| ------------------------------------------- | ------------------------------------- |
| `TextButton`                                | `Button`                              |
| `IconButtonWithMenuProps`                   | `CompositeButtonProps`                |
| `IconButton` prop `enabled`                 | `active`                              |
| `variant="success" \| "danger" \| "active"` | `"destructive"`, or the `active` prop |

`variant` now maps to the design system's Style and `appearance` to its Type. `active`
renders as `aria-pressed`, so a selected control is exposed to assistive technology
rather than only styled.

### Removed CSS classes

`str-video__text-button`, `str-video__button__icon`, `str-video__call-controls__button*`,
`str-video__composite-button__button*` and `str-video__menu-toggle-button*` are gone.
They are replaced by `str-video__button--*` and
`str-video__composite-button__{group,action,caret}`.

### Removed theming variables

The eight `--str-video__composite-button__button-group*` hooks are gone. Buttons are
themed through the design tokens now.

### Spacing was re-based

`--str-video__spacing-*` keep their names but every step shifted:

| Token | v1   | v2   |
| ----- | ---- | ---- |
| `xs`  | 6px  | 8px  |
| `sm`  | 8px  | 12px |
| `md`  | 12px | 16px |
| `lg`  | 16px | 20px |
| `xl`  | 20px | 24px |

If you used these tokens for your own layout, it moves with them. Icon-only button insets
also changed (at `lg`, from 8px to 16px), so a button sized around its own padding is now
a different size.

## What to expect during the beta

The design-token migration is proceeding component by component, so more changes of this
shape are coming. Treat this page as the running list and re-read it when you bump; each
entry will name the version it landed in and the change you have to make.

If you hit something that behaves differently and is not listed here, that is worth
reporting: an unlisted break is a bug in this page as much as in the SDK.

## Staying on v1

v1 is maintained on its own release line and stays on the `latest` tag. If you are not
ready to move, pin `@stream-io/video-react-sdk@latest` and switch this page to v1 with the
version picker above.

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/v1-to-v2-migration/](https://getstream.io/video/docs/react/v2/v1-to-v2-migration/).