wt-indicator.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
color		string	'secondary'	The color variant for the component	'<wt-indicator color="primary"></wt-indicator>'
text		string,number	-	The text content for the component Can be a string or a number	'<wt-indicator text="Sample Text"></wt-indicator>'
size		string	'md'	The size of the component	'<wt-indicator size="sm"></wt-indicator>'

Example Indicator Different Colors

primary

secondary

success

error

transfer

disabled

break-out

info

final-status

other-status

initial-status

Code

<script setup>
const colors = [
  'primary',
  'secondary',
  'success',
  'error',
  'transfer',
  'disabled',
  'break-out',
  'info',
  'final-status',
  'other-status',
  'initial-status',
];
</script>

<template>
  <wt-indicator
    v-for="color of colors"
    :key="color"
    :color="color"
    :text="color"
  />
</template>

<style scoped lang="scss"></style>

Example Indicator Different Sizes

sm

md

Code

<script setup>
const sizes = ['sm', 'md'];
</script>

<template>
  <wt-indicator
    v-for="size of sizes"
    :key="size"
    :size="size"
    :text="size"
  />
</template>

<style scoped lang="scss"></style>