Returnless UI

Category bar ​

The category bar component is used to display a list of categories with a selected category highlighted.

Props
categories:
CategoryBarCategory[]
Defaults to unknown

Usage ​

  • Product does not meet expectations
    2446 (33.6%)
  • Ordered wrong product
    2001 (27.5%)
  • Wrong size or the fit not as expected
    1491 (20.5%)
  • Size too small
    780 (10.7%)
  • Wrong product delivered
    566 (7.8%)
  • Total 7284
js
<script lang="ts" setup>
import {
  CategoryBar,
  CategoryBarCategory,
} from '@returnless/focus-ui';

const categories: CategoryBarCategory[] = [
  { color: 'purple', value: 2446, label: 'Product does not meet expectations' },
  { color: 'green', value: 2001, label: 'Ordered wrong product' },
  { color: 'blue', value: 1491, label: 'Wrong size or the fit not as expected' },
  { color: 'orange', value: 780, label: 'Size too small' },
  { color: 'red', value: 566, label: 'Wrong product delivered' },
];
</script>

<template>
  <CategoryBar :categories="categories" />
</template>