The Error component can be shown for all error types, or a subset of them. It is usually recommended to be more granular in the error types, since some errors are more “fatal” and some cannot be recovered from.


  • Conditional rendering based on the error state, customizable with the matcher pattern
  • Dynamic data attributes for custom styling based on the current error state


Import the components and piece the parts together.

import * as Player from "@livepeer/react/player";

export default () => (
      <Player.ErrorIndicator />


The component accepts all props suitable for a div element, in addition to the following specific props:


A boolean to force the component’s presence in the DOM, useful for controlling animations with external libraries.


A prop to define the condition under which the ErrorIndicator should be visible. It can be a string indicating a broad category of errors (like "all" or "not-permissions") or a more specific error type. Alternatively, it can be a function for custom logic, receiving the PlaybackError type and returning a boolean for whether it should be shown.

Data Attributes


Always present to indicate the component’s role.


Indicates whether there is an error ("true" or "false").


Specifies the type of the current error or "none" if no error is present.

Could be one of: "offline" | "access-control" | "fallback" | "permissions" | "unknown" | "none"


Reflects whether the indicator is currently visible ("true" or "false").

This is often used for dynamically applying enter/exit CSS animations.