Indicator

A small dot that shows a status.

Ongoing

Finished

Dropped

Not started

<script setup lang="ts">
  import { Indicator, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <Inline gap="sm" align="center">
      <Indicator tone="success" pulse />
      <Text>Ongoing</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator tone="info" />
      <Text>Finished</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator tone="danger" />
      <Text>Dropped</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator />
      <Text>Not started</Text>
    </Inline>
  </Inline>
</template>

vue

Usage

import { Indicator } from '@hina-ui/vue'

The dot has a colour and nothing else. Put it before text to show the status of that item, or pin it to the corner of an avatar with Badge to show presence.

Ongoing

<script setup lang="ts">
  import { Indicator, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="sm" align="center">
    <Indicator tone="success" />
    <Text>Ongoing</Text>
  </Inline>
</template>

vue

Examples

Tones

Six tones; the default is neutral.

<script setup lang="ts">
  import { Indicator, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <Indicator />
    <Indicator tone="accent" />
    <Indicator tone="success" />
    <Indicator tone="warning" />
    <Indicator tone="danger" />
    <Indicator tone="info" />
  </Inline>
</template>

vue

Sizes

Three sizes; the default is md.

<script setup lang="ts">
  import { Indicator, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <Indicator tone="accent" size="sm" />
    <Indicator tone="accent" />
    <Indicator tone="accent" size="lg" />
  </Inline>
</template>

vue

Pulse

With pulse set the dot sends out a fading ring, for a status that is in progress such as ongoing or live.

Live

Updating

<script setup lang="ts">
  import { Indicator, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <Inline gap="sm" align="center">
      <Indicator tone="danger" pulse />
      <Text>Live</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator tone="accent" size="lg" pulse />
      <Text>Updating</Text>
    </Inline>
  </Inline>
</template>

vue

Spoken label

When no text next to the dot states the status, give screen readers one through label.

Online

Hoshimi Shion

<script setup lang="ts">
  import { Indicator, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="sm" align="center">
    <Indicator tone="success" label="Online" />
    <Text>Hoshimi Shion</Text>
  </Inline>
</template>

vue

On an avatar

Use the bare mode of Badge to pin the dot to the corner of an avatar, with the dot in the content slot.

OnlineHSAway

<script setup lang="ts">
  import { Avatar, Badge, Indicator, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg">
    <Badge content="online" bare label="Online" placement="bottom-end" shape="circle">
      <template #content>
        <Indicator tone="success" size="lg" />
      </template>
      <Avatar src="/avatars/paper.webp" alt="Hoshimi Shion" />
    </Badge>
    <Badge content="away" bare label="Away" placement="bottom-end" shape="circle">
      <template #content>
        <Indicator tone="warning" size="lg" />
      </template>
      <Avatar name="Hoshimi Shion" />
    </Badge>
  </Inline>
</template>

vue

Behaviour

The dot is not interactive and does not follow the state of its host.
When the system asks for reduced motion the pulse ring is not shown.

API

Props

Prop	Type	Default	Description
`tone`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	Tone
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`pulse`	`boolean`	`false`	Whether to send out a fading ring
`label`	`string`	—	Text read by screen readers
`as`	`string`	`'span'`	The rendered tag
`class`	`string`	—	Classes appended to the root element