Meter

Display a gauge meter that fills or depletes.

Usage

Use the value prop from 0 to 100 to set a value for the meter bar.

<template>
  <UMeter :value="25" />
</template>

Check out the Range component for inputs

Min & Max

By default, min is 0 and max is 100. You can change either of these using their respective props, even for negative numbers.

<template>
  <UMeter :value="-25" :min="-50" :max="50" />
</template>

Indicator

You may show a percentage indicator on top of the meter using the indicator prop.

<template>
  <UMeter :value="35" indicator />
</template>

Label

Add a label below the meter using the label prop.

<template>
  <UMeter label="Disk usage" :value="86" />
</template>

Icon

You may also add an icon to the start label using the icon prop.

<template>
  <UMeter icon="i-heroicons-server" :value="86" label="Disk usage" />
</template>

Size

Change the size of the meter bar using the size prop.

<template>
  <UMeter size="md" indicator label="CPU Load" :value="75.4" />
</template>

Style

The color prop changes the visual style of the meter bar. The color can be any color from the ui.colors object.

<template>
  <UMeter color="primary" :value="80" indicator label="Memory usage" />
</template>

Group

To group multiple meters into a group, adding all values, use the MeterGroup component.

• To change the overall minimum and maximum value, pass the min and max props respectively.
• To change size of all meters, use the size prop.
• To show an indicator for the overall amount, set the indicator prop or slot.
• To change the color of each meter, use the color prop.
• To show a label for each meter, use the label prop on each meter.
• To change the icon for each meter, use the icon prop.

<template>
  <UMeterGroup :min="0" :max="128" size="md" indicator icon="i-heroicons-minus">
    <UMeter :value="24" color="gray" label="System" />
    <UMeter :value="8" color="red" label="Apps" />
    <UMeter :value="12" color="yellow" label="Documents" />
    <UMeter :value="42" color="green" label="Multimedia" />
    <!-- Total: 86 -->
  </UMeterGroup>
</template>

When the Meters are grouped, their individual indicators and label slots are stripped away.

<template>
  <UMeterGroup :min="0" :max="128" size="md" indicator>
    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
    <!-- Total: 86 -->
  </UMeterGroup>
</template>

A Meter group can also be used with an indicator slot, and even individual meter icons.

Slots

Indicator

Use the #indicator slot to change the indicator shown at the top of the bar. It receives the current meter percent.

<script setup lang="ts">
const used = ref(84.2)
const total = 238.42
</script>

<template>
  <UMeter :value="used" :max="total">
    <template #indicator="{ percent }">
      <div class="text-sm text-right">
        {{ used }}GB used ({{ Math.round(percent) }}%)
      </div>
    </template>
  </UMeter>
</template>

Label

The label slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.

<script setup lang="ts">
const used = ref(84.2)
const total = 238.42
</script>

<template>
  <UMeter :value="used" :max="total">
    <template #label="{ percent }">
      <p class="text-sm">
        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
      </p>
    </template>
  </UMeter>
</template>

Props

Meter Props

Prop	Type	Default	Description
size	"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl"	config.default.size	Size of the meter
value	number	0	Current value of the meter
label	string	null	Label text
color	string	config.default.color	Color of the meter
icon	string	null	Icon to display with the label
min	number	0	Minimum value
max	number	100	Maximum value
indicator	boolean	false	Show percentage indicator

MeterGroup Props

Prop	Type	Default	Description
size	"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"	meterConfig.default.size	Size of the meters
min	number	0	Minimum total value
max	number	100	Maximum total value
icon	string	meterGroupConfig.default.icon	Icon for the group
indicator	boolean	false	Show total percentage indicator

Config

{
  wrapper: 'w-full flex flex-col gap-2',
  indicator: {
    container: 'min-w-fit transition-all',
    text: 'text-gray-400 dark:text-gray-500 text-end',
    size: {
      '2xs': 'text-xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-sm',
      lg: 'text-sm',
      xl: 'text-base',
      '2xl': 'text-base'
    }
  },
  meter: {
    base: 'appearance-none block w-full bg-none overflow-y-hidden',
    background: 'bg-gray-200 dark:bg-gray-700',
    color: 'text-{color}-500 dark:text-{color}-400',
    ring: '',
    rounded: 'rounded-full',
    shadow: '',
    size: {
      '2xs': 'h-px',
      xs: 'h-0.5',
      sm: 'h-1',
      md: 'h-2',
      lg: 'h-3',
      xl: 'h-4',
      '2xl': 'h-5'
    },
    appearance: {
      inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
      meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
      bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
      value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
    },
    bar: {
      transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
      ring: '',
      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
      size: {
        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
      }
    }
  },
  label: {
    base: 'flex gap-2 items-center',
    text: 'truncate',
    color: 'text-{color}-500 dark:text-{color}-400',
    size: {
      '2xs': 'text-xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-sm',
      lg: 'text-sm',
      xl: 'text-base',
      '2xl': 'text-base'
    }
  },
  color: {
    white: 'text-white dark:text-black',
    black: 'text-black dark:text-white',
    gray: 'text-gray-500 dark:text-gray-400'
  },
  default: {
    size: 'md',
    color: 'primary'
  }
}