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.

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

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:

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.