> Markdown version of [Adding Legacy Components in a Flow Layout](https://vaadin.com/docs/next/tools/mpr/configuration/adding-legacy-components). Section index: [llms.txt](https://vaadin.com/docs/next/tools/llms.txt)

# Adding Legacy Components in a Flow Layout

As shown in the [Adding Legacy components to Flow layouts](https://vaadin.com/docs/next/tools/mpr/introduction/5-adding-legacy-components.md) tutorial, you can use the `LegacyWrapper` class to wrap up any legacy component and add it to a Flow layout. In this tutorial, we’re going to explore different ways of adding Components and how to customize them.

## <a id="legacywrapper"></a>LegacyWrapper

The `LegacyWrapper` class is the most direct way of adding legacy components to your Flow application. You can add any Components, Containers or Views this way. But keep in mind that this wrapper class also creates a wrapping `div` around the component on the client-side.

```java
Button button = new Button("Legacy button");
add(new LegacyWrapper(button));
```

By default, the style of this wrapper `div` has `display: inline-block`, and `width` and `height` set to `inherit`. This means that the `LegacyWrapper` component uses whatever size is defined on its parent element to determine its own size.

However, since `LegacyWrapper` is a Flow component, you can customize it as much as needed. For example, you can set it to have full size, to better accommodate some legacy framework layout:

```java
// Vaadin 7 or 8 VerticalLayout
VerticalLayout legacyLayout = new VerticalLayout();
LegacyWrapper wrapper = new LegacyWrapper(legacyLayout);
wrapper.setSizeFull();
add(wrapper);
```

## <a id="hasLegacyComponents"></a>HasLegacyComponents

In most of the cases, there’s no need to customize the `LegacyWrapper` at all. In these situations you can use a Flow component that implements the `HasLegacyComponents` mixin interface, and use the `add` method directly for both Flow and legacy components, without having to wrap the components (the wrapping is done automatically for you).

```java
// Flow layout
public class MainLayout extends Div implements HasLegacyComponents {

    public MainLayout() {
        Button button = new Button("Legacy button");
        add(button); // no wrapping is needed
    }
}
```

The `HasLegacyComponents` interface also brings methods to remove legacy components, without having to deal with the wrappers.

[Back to Overview](https://vaadin.com/docs/next/tools/mpr/overview.md)

`2823B693-3F8E-4664-B50A-901B45AD4933`