Badge ​

Badges are used to inform users of the tone of an object or of an action that's been taken.

Usage ​

<script lang="ts" setup>
import { Badge } from '@returnless/focus-ui';
</script>

<template>
  <Badge color="slate">Fulfilled</Badge>
  <Badge color="blue">Draft</Badge>
  <Badge color="green">Active</Badge>
  <Badge color="yellow">Open</Badge>
  <Badge color="red">Action required</Badge>
</template>

Badges with icons ​

Badges can include icons to help users quickly identify the tone of an object or action.

<script lang="ts" setup>
import { Badge, BadgeContent, BadgeIcon } from '@returnless/focus-ui';
import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
</script>

<template>
  <Badge color="green">
    <BadgeContent>+ 25%</BadgeContent>
    <BadgeIcon>
      <ArrowTrendingUpIcon />
    </BadgeIcon>
  </Badge>
  <Badge color="red">
    <BadgeIcon>
      <ArrowTrendingDownIcon />
    </BadgeIcon>
    <BadgeContent>- 25%</BadgeContent>
  </Badge>
</template>

Badge sizes ​

Badges come in three sizes: small, medium, and large.

Best practices ​

Badges benefit users by:

• Using established color patterns so that users can quickly identify their tone or importance level.
• Being clearly labeled with short, scannable text.
• Being positioned to clearly identify the object they're informing or labelling.

Content guidelines ​

Badge labels should:

• Use a single word to describe the tone of an object.
• Only use two words if you need to describe a complex state. For example "Partially refunded" and "Partially paid".
• Always describe the tone in the past tense. For example, refunded not refund.

Accessibility ​

Badges that convey information with icons or color include text provided by the visually hidden component. The text is read out by assistive technologies so that users with vision issues can access meaning of the badge in context.