Components

Badges

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

   

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.

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.

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.

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

API Reference: BadgeDelta