Banner

The v-banner component is used as middle-interruptive message to user with 1-2 actions. It comes in 2 variations, single-line and multi-line (implicit). These can have icons which you can use with your message and actions.

<template>
  <v-card>
    <v-system-bar></v-system-bar>
    <v-toolbar flat>
      <v-toolbar-title>My Document</v-toolbar-title>
      <div class="flex-grow-1"></div>
      <div>
        <v-switch
          v-model="sticky"
          label="Sticky Banner"
          hide-details
        ></v-switch>
      </div>
    </v-toolbar>
    <v-banner
      single-line
      :sticky="sticky"
    >
      We can't save your edits while you are in offline mode.

      <template v-slot:actions>
        <v-btn
          text
          color="deep-purple accent-4"
        >Get Online</v-btn>
      </template>
    </v-banner>
    <v-card-text class="grey lighten-4">
      <v-sheet
        max-width="800"
        height="300"
        class="mx-auto"
      ></v-sheet>
    </v-card-text>
  </v-card>
</template>