Legend CounterReady

Legend counter is used to display a set of counters with labels and corresponding values, styled according to their status. It supports translation for labels and offers size customization.

Open in new window
Open in new window
View RTL
<script setup lang="ts">
import type { Counter } from '~/components/LegendCounter.vue'

const counters = ref<Counter[]>([
  { label: 'notStarted', value: 45 },
  { label: 'processing', value: 6 },
  { label: 'submitted', value: 100 },
  { label: 'incorrectAmount', value: 0 },
])
</script>

<template>
  <LegendCounter :counters />
</template>

Usage

This section includes guidelines for designers and developers about the usage of this pattern in different contexts.

Do

  • Use this component to display counters (auxiliary information) for distinct categories or statuses.
  • Ensure the label corresponds to one of the predefined statuses: notStarted, processing, submitted, or incorrectAmount.
  • Provide meaningful numeric values or default to 0 if no value is available.
  • Use the size prop to adjust the size of the counters to fit the design requirements.

Don’t

  • Don't use this component for non-status-related counters; it is designed specifically for predefined statuses.
  • Avoid providing excessively large or negative numbers as value, as it may break visual consistency.
  • Don't use this component if translations for label are unavailable or unclear.
  • Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.

Integration

This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).


Troubleshooting

If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page