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";

Badge sizes

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

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

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

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

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

    <Badge size="lg">live</Badge>

    <Badge size="xl">live</Badge>
  </>
);

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 className="max-w-sm">
    <Flex justifyContent="between" alignItems="center">
      <Text>Sales</Text>
      <BadgeDelta
        deltaType="moderateIncrease"
        isIncreasePositive={true}
        size="xs"
      >
        +12.3%
      </BadgeDelta>
    </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>live</Badge>
    <Badge>ordered</Badge>
    <Badge>waiting</Badge>
    <Badge>operational</Badge>
    <Badge>downtime</Badge>
    <p>Badge with icon</p>
    <Badge icon={StatusOnlineIcon}>live</Badge>
    <Badge icon={ShoppingCartIcon}>ordered</Badge>
    <Badge icon={ClockIcon}>waiting</Badge>
    <Badge icon={CogIcon}>operational</Badge>
    <Badge icon={MinusCircleIcon}>downtime</Badge>
    <p>BadgeDelta with pre-defined status icons</p>
    <BadgeDelta deltaType="increase">text</BadgeDelta>
    <BadgeDelta deltaType="moderateIncrease">text</BadgeDelta>
    <BadgeDelta deltaType="unchanged">text</BadgeDelta>
    <BadgeDelta deltaType="moderateDecrease">text</BadgeDelta>
    <BadgeDelta deltaType="decrease">text</BadgeDelta>
    <p>BadgeDelta without text</p>
    <BadgeDelta deltaType="increase" />
    <BadgeDelta deltaType="moderateIncrease" />
    <BadgeDelta deltaType="unchanged" />
    <BadgeDelta deltaType="moderateDecrease" />
    <BadgeDelta deltaType="decrease" />
  </>
);

API Reference: Badge

client component

API Reference: BadgeDelta

client component