Skip to content

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.

System Bar Entry

Usage ​

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

API ​

ComponentDescription
v-system-barPrimary Component

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

System Bar Anatomy

Element / AreaDescription
1. ContainerThe 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

Examples ​

Props ​

Color ​

You can optionally change the color of the v-system-bar by using the color prop.

Window ​

A window bar with window controls and status info.

Released under the MIT License.