System bars

The v-system-bar component can be used for displaying statuses to the user. It looks like the Android system bar and can contain icons, spacers, and some text.

Copy Page as Markdown

Usage

v-system-bar in its simplest form displays a small container with default theme.

3:13PM

<v-system-bar>
  <v-icon icon="mdi-wifi-strength-4"></v-icon>
  <v-icon icon="mdi-signal" class="ms-2"></v-icon>
  <v-icon icon="mdi-battery" class="ms-2"></v-icon>

  <span class="ms-2">3:13PM</span>
</v-system-bar>

ads via vuetify

API

Component	Description
v-system-bar	Primary Component

Toggle Inline API

Anatomy

The recommended placement of elements inside of v-system-bar is:

Place informational icons to the right
Place time or other textual information to the far right

Element / Area	Description
1. Container	The System Bar container has a default slot with content justified right
2. Icon items (optional)	Used to convey information through the use of icons
3. Text (optional)	Textual content that is typically used to show time

Toggle Inline API