What is AppBar vs ToolBar?

Question

All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two?

https://material.io/design/components/ does not have Toolbar component, only "App bars: top".

https://material.io/develop/web/components/toolbar/ says "The existing MDCToolbar component and styles will be removed in a future release"

So will material-ui Toolbar go away eventually?

Answer 1

I was looking at the default CSS properties produced by each component. The main purpose of Toolbar is to display its children with an inline display (elements are placed next to each other), something Appbar doesn't do. The AppBar component uses display: flex and flex-direction: column, that means direct descendants are stacked on top of each other. On the other hand Toolbar uses display: flex too, but doesn't set flex-direction, which means it uses its default value: row. That being said, the Button component uses display: inline-block. Thats the reason why elements are placed next to each other inside Toolbar components.

Let say, for example, we have an Appbar with a Toolbar with two Buttons as children:

<AppBar>
    <Toolbar>
        <Button variant="outlined" color="inherit" >
            Button 1
        </Button>
        <Button variant="outlined" color="inherit">
            Button 2
        </Button>
    </Toolbar>
</AppBar>

The result of this code is shown here

But, if we remove the Toolbar and place the Buttons directly under the AppBar component:

<AppBar>
    <Button variant="outlined" color="inherit" >
        Button 1
    </Button>
    <Button variant="outlined" color="inherit">
        Button 2
    </Button>
</AppBar>

the result will be very different (shown here), because now the buttons are direct descendants of the AppBar component and so, they will be stacked on top of each other.

As you see, AppBar and Toolbar have different purposes. Thats why I think Toolbar will never go away.