Badges

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

Get component as a copy & paste version.

Storybook GitHub

Updatedliveincrease21.2%

import { RiRecordCircleFill } from '@remixicon/react';
import { Badge, BadgeDelta } from '@tremor/react';
export const BadgeHero = () => (  <div className="mx-auto space-y-12">    <div className="flex flex-wrap items-center justify-center gap-6">      <Badge>Updated</Badge>      <Badge icon={RiRecordCircleFill}>live</Badge>      <BadgeDelta deltaType="increase" isIncreasePositive={true} />      <BadgeDelta deltaType="increase" isIncreasePositive={true}>        increase      </BadgeDelta>      <BadgeDelta deltaType="moderateDecrease" isIncreasePositive={true}>        21.2%      </BadgeDelta>    </div>  </div>);

Tremor exports two badge components:

Badge: Badge that can take text and/or icon element.
BadgeDelta: Badge with trend indicator for five different status.

import { Badge, BadgeDelta } from '@tremor/react';

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

live

import { Badge } from '@tremor/react';
export function BadgeUsageExampleWithSize() {  return (    <div className="flex flex-wrap">      <div className="mx-auto">        <p className="mb-2 font-mono text-sm text-slate-500">xs</p>        <Badge size="xs">live</Badge>      </div>
      <div className="mx-auto">        <p className="mb-2 font-mono text-sm text-slate-500">sm</p>        <Badge size="sm">live</Badge>      </div>
      <div className="mx-auto ">        <p className="mb-2 font-mono text-sm text-slate-500">md</p>        <Badge size="md">live</Badge>      </div>
      <div className="mx-auto">        <p className="mb-2 font-mono text-sm text-slate-500">lg</p>        <Badge size="lg">live</Badge>      </div>
      <div className="mx-auto">        <p className="mb-2 font-mono text-sm text-slate-500">xl</p>        <Badge size="xl">live</Badge>      </div>    </div>  );}

Composition of a simple KPI card using BadgeDelta combined with text elements.

Sales

+9.3%

$23,456

import { BadgeDelta, Card } from '@tremor/react';
export function BadgeUsageExample() {  return (    <Card className="mx-auto max-w-sm">      <div className="flex items-center justify-between">        <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Sales</h4>        <BadgeDelta          deltaType="moderateIncrease"          isIncreasePositive={true}          size="xs"        >          +9.3%        </BadgeDelta>      </div>      <p className="text-tremor-metric text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">$23,456</p>    </Card>  );}

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

Badge with Icon input

liveorderedwaitingoperationaldowntime

BadgeDelta with pre-defined status icons

texttexttexttexttext

import {  RiArrowDownCircleFill,  RiCloudFill,  RiLiveFill,  RiShoppingCartFill,  RiTimeFill,} from '@remixicon/react';
import { Badge, BadgeDelta } from '@tremor/react';
export function BadgeUsageExampleWithIcons() {  return (    <div className="mx-auto space-y-12">      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Badge with Icon input        </p>        <div className="flex flex-wrap items-center justify-center gap-6">          <Badge icon={RiLiveFill}>live</Badge>          <Badge icon={RiShoppingCartFill}>ordered</Badge>          <Badge icon={RiTimeFill}>waiting</Badge>          <Badge icon={RiCloudFill}>operational</Badge>          <Badge icon={RiArrowDownCircleFill}>downtime</Badge>        </div>      </div>      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          BadgeDelta with pre-defined status icons        </p>        <div className="flex flex-wrap items-center justify-center gap-6">          <BadgeDelta deltaType="increase" isIncreasePositive={true}>            text          </BadgeDelta>          <BadgeDelta deltaType="moderateIncrease" isIncreasePositive={true}>            text          </BadgeDelta>          <BadgeDelta deltaType="unchanged" isIncreasePositive={true}>            text          </BadgeDelta>          <BadgeDelta deltaType="moderateDecrease" isIncreasePositive={true}>            text          </BadgeDelta>          <BadgeDelta deltaType="decrease" isIncreasePositive={true}>            text          </BadgeDelta>        </div>      </div>    </div>  );}

client component

size: Set the component's width behavior.

icon: Set an icon.

color: Sets the color of the badge.

tooltip: Set a tooltip on hover.

client component

size: Set the component's width behavior.

deltaType: Perceived degree of increase or decrease of delta value.

isIncreasePositive: Indicate wether positive change is interpreted as positive.

tooltip: Set a tooltip on hover.

Element	Theme Token
Roundness borderRadiustremor-full	borderRadiustremor-full
Background color colorstremor-brand-muted	colorstremor-brand-muted
Text color colorstremor-brand-emphasis	colorstremor-brand-emphasis

Element	Theme Token
Roundness borderRadiustremor-full	borderRadiustremor-full