Support Banner Component

[MastroLindus]

Hi,

If I am not mistaken there's no current support for the banner component:

https://material.io/design/components/banners.html

If it is not supported, are you planning to do it?
If it is provided, could you point me to its documentation?

Thanks and keep up the fantastic work!

Benchmark

• https://vuetifyjs.com/en/components/banners/

[AirborneEagle]

I just noticed this as well.
Until a Banner Component is supported, what would be the best "work around" ,
maybe just a Paper that moves in, and contains some actions?

[oliviertassinari]

what would be the best "work around" ,
maybe just a Paper that moves in, and contains some actions?

@AirborneEagle Here is an idea. I hope that helps:

import React from "react";
import Box from "@material-ui/core/Box";
import CssBaseline from "@material-ui/core/CssBaseline";
import Paper from "@material-ui/core/Paper";
import Stack from "@material-ui/core/Stack";
import Avatar from "@material-ui/core/Avatar";
import Divider from "@material-ui/core/Divider";
import SignalWifiOffIcon from "@material-ui/icons/SignalWifiOff";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

export default function Banner() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Paper elevation={0} sx={{ p: 2, pb: 1 }}>
        <Stack spacing={2} direction="row" alignItems="center">
          <Avatar sx={{ bgcolor: "primary.main" }}>
            <SignalWifiOffIcon />
          </Avatar>
          <Typography variant="body2">
            You have lost connection to the internet. This app is offline.
          </Typography>
        </Stack>
        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
          <Button color="primary">Turn on wifi</Button>
        </Box>
      </Paper>
      <Divider />
    </React.Fragment>
  );
}

https://codesandbox.io/s/oj1mzjmk06

[alexplumb]

I had to implement this in one of my projects and couldn't really find anything that fit the material design spec, so I've published the components I made: https://github.com/alexplumb/material-ui-banner

[vicasas]

Should an example be added in the docs? It is not clear to me.

[oliviertassinari]

@vicasas I have updated my original comment to use v5. As for the best next step, I don't know. It seems trivial to implement with the system. I would propose we close. I can't remember the last time I saw this component in use.

[vicasas]

@oliviertassinari If it is part of material design, shouldn't we have it the same? Even though it can be done with other components, I feel that it should exist as a quick-use component.

Developers will not want to spend time styling according to material design, they will wait for a solution delivered by MUI. As for example in Vuetify https://next.vuetifyjs.com/en/components/banners/

[oliviertassinari]

@vicasas There isn't any specific about it