Badge

Overview

Badges are labels which hold small amounts of information. These can be used to indicate status or small numerical value to support other UI elements.

Badges are generally used within other UI elements to help indicate status. They can also be used within table or list views to help draw attention to the state of an item. They may also be used inside tabs or menu items to indicate the number of 'new' things in that element.

When to use

• When you need to highlight the state of an element on the page to the user.
• When you need to identify how many items are inside a group of items.

When not to use

• When you're already highlighting the state of an item another way.
• Avoid using multiple badges in the same context where possible.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Badge

Label

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Color

BadgeColor

type BadgeColor = typeof badgeColors[number];

gray

The color of the badge.

 

graybluegreenyelloworangered

Label

string

Required

The label text of the badge.

 

Size

BadgeSize

type BadgeSize = typeof badgeSizes[number];

medium

The size of the badge.

 

tinysmallmediumlarge

Tint

boolean

false

The changes the colour of the badge to a lighter tint.

Toggle Prop

Show Dot

boolean

false

Whether to show a white dot in the badge before the label.

Toggle Prop

Colors

Badges can be set to one of a small list of colours. They can be used in many different contexts but the most common use case is to indicate a severity scale.

Gray

Blue

Green

Yellow

Orange

Red

<template>
  <DocExample>
    <MedKitBadge label="Gray" color="gray" />
    <MedKitBadge label="Blue" color="blue" />
    <MedKitBadge label="Green" color="green" />
    <MedKitBadge label="Yellow" color="yellow" />
    <MedKitBadge label="Orange" color="orange" />
    <MedKitBadge label="Red" color="red" :show-dot="true" />
  </DocExample>
</template>

Tints

The tint prop lightens the badge: softer background fills and darker text on top, which reads well on light UI surfaces. Leave tint off (or set it to false) when you need the stronger, higher-contrast treatment—for example counters on tinted rows or anywhere the badge must stand out more.

Gray

Blue

Green

Yellow

Orange

Red

<template>
  <DocExample>
    <MedKitBadge label="Gray" color="gray" tint />
    <MedKitBadge label="Blue" color="blue" tint />
    <MedKitBadge label="Green" color="green" tint />
    <MedKitBadge label="Yellow" color="yellow" tint />
    <MedKitBadge label="Orange" color="orange" tint />
    <MedKitBadge label="Red" color="red" tint />
  </DocExample>
</template>

Sizes

Depending on the context badges can be used in a variety of sizes. In most cases small and tiny are used. But there are some cases where they need to have more significants in the hierarchy of the page.

Tiny

Small

Medium

Large

<template>
  <DocExample>
    <MedKitBadge label="Tiny" size="tiny" />
    <MedKitBadge label="Small" size="small" />
    <MedKitBadge label="Medium" size="medium" />
    <MedKitBadge label="Large" size="large" />
  </DocExample>
</template>

Example usage

Here are a handful of examples of how badges can be used.

24 Sep 2021

11:25am

Maureen Biologist

MRN: 11223344

Ready for review

24 Sep 2021

10:43am

Emma Grate

MRN: 55667788

Reviewed

24 Sep 2021

09:17am

Laura Biding

MRN: 99887766

High-Risk

All mail

153

Unread

24

Read

57

Archived

72

Figma Library

You can find the Badge component in our MedKit Figma library.