1. Components
  2. Badges

Components

Badges

Badges are subtle elements to highlight information which are often used in tables and lists as well as in combination with metrics

Updated

live

text

21.2%

   

Import Badges

Tremor exports two badge components:

  • Badge: Badge with text as input
  • BadgeDelta: Badge with text input option and pre-defined status icons and coloring to indicate change and its direction
import { Badge, BadgeDelta } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Badge } from "@tremor/react";

export default () => (
  <Badge
    text=""
    color="blue"
    size="sm"
    icon={undefined}
    tooltip=""
    marginTop="mt-0" />
);
import { BadgeDelta } from "@tremor/react";

export default () => (
  <BadgeDelta
    text=""
    deltaType="increase"
    isIncreasePositive={true}
    size="sm"
    tooltip=""
    marginTop="mt-0"
  />
);

Badge sizes

Each badge component has four different sizes xs, sm, md, and lg.

xs

live

sm

live

md

live

lg

live

import { Badge } from "@tremor/react";

export default () => (
  <>
    <Badge text="live" size="xs" />

    <Badge text="live" size="sm" />

    <Badge text="live" size="md" />

    <Badge text="live" size="lg" />
  </>
);

Usage example 1

Composition of a simple KPI card using BadgeDelta combined with Metric and Flex components.

BadgeDelta with Card, Title, Metric and Flex component

Sales

+12.3%

$ 23,456

import { Card, Flex, Metric, BadgeDelta, Text } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-sm">
    <Flex justifyContent="justify-between" alignItems="items-center">
      <Text>Sales</Text>
      <BadgeDelta
        deltaType="moderateIncrease"
        text="+12.3%"
        isIncreasePositive={true}
        size="xs"
      />
    </Flex>
    <Metric>$ 23,456</Metric>
  </Card>
);

Usage example 2

The example below shows a composition of different badges with our two Badge components.

Badge

live

ordered

waiting

operational

downtime

Badge with Icon input

live

ordered

waiting

operational

downtime

BadgeDelta with pre-defined status icons

text

text

text

text

text

BadgeDelta without text

import { Badge, BadgeDelta } from "@tremor/react";
import {
  StatusOnlineIcon,
  ShoppingCartIcon,
  CogIcon,
  ClockIcon,
  MinusCircleIcon,
} from "@heroicons/react/outline";

export default () => (
    <>
      <p>Badge</p>
      <Badge text="live" />
      <Badge text="ordered" />
      <Badge text="waiting" />
      <Badge text="operational" />
      <Badge text="downtime" />
      <p>Badge with icon</p>
      <Badge text="live" icon={StatusOnlineIcon} />
      <Badge text="ordered" icon={ShoppingCartIcon} />
      <Badge text="waiting" icon={ClockIcon} />
      <Badge text="operational" icon={CogIcon} />
      <Badge text="downtime" icon={MinusCircleIcon} />
      <p>BadgeDelta with pre-defined status icons</p>
      <BadgeDelta text="text" deltaType="increase" />
      <BadgeDelta text="text" deltaType="moderateIncrease" />
      <BadgeDelta text="text" deltaType="unchanged" />
      <BadgeDelta text="text" deltaType="moderateDecrease" />
      <BadgeDelta text="text" deltaType="decrease" />
      <p>BadgeDelta without text</p>
      <BadgeDelta deltaType="increase" />
      <BadgeDelta deltaType="moderateIncrease" />
      <BadgeDelta deltaType="unchanged" />
      <BadgeDelta deltaType="moderateDecrease" />
      <BadgeDelta deltaType="decrease" />
    </>
);

API Reference: Badge

text
Description
Set the text to be displayed in badge.
Type
string
Default
-
Values
sizeoptional
Description
Set the component's width behavior.
Type
string
Default
sm
Values
xs, sm, md, lg
iconoptional
Description
Set an icon.
Type
React.ReactElement
Default
-
Values
coloroptional
Description
Sets the color of the badge.
Type
string
Default
blue
Values
See color section
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: BadgeDelta

textoptional
Description
Displayed value in the badge.
Type
string
Default
-
Values
deltaTypeoptional
Description
Perceived degree of increase or decrease of delta value.
Type
string
Default
increase
Values
decrease, moderateDecrease, unchanged, moderateIncrease, increase
sizeoptional
Description
Set the component's width behavior.
Type
string
Default
sm
Values
xs, sm, md, lg
isIncreasePositiveoptional
Description
Indicate wether positive change is interpreted as positive.
Type
boolean
Default
{ true }
Values
true, false
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0