UI

Badges

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

Updatedliveincrease21.2%

Import Badges

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

Usage example Badge sizes

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

xs

live

sm

live

md

live

lg

live

xl

live

Usage example

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

Sales

+9.3%

$23,456

Usage example with icons

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

API Reference: Badge

client component
size
string

Default: sm

Set the component's width behavior.
icon
React.ReactElement
Set an icon.
color
Color

Default: blue

Sets the color of the badge.
tooltip
string
Set a tooltip on hover.

API Reference: BadgeDelta

client component
size
string

Default: sm

Set the component's width behavior.
deltaType
string

Default: increase

Perceived degree of increase or decrease of delta value.
isIncreasePositive
boolean

Default: { true }

Indicate wether positive change is interpreted as positive.
tooltip
string
Set a tooltip on hover.

Theming

Badge

Roundness
borderRadiustremor-full
Background color
colorstremor-brand-muted
Text color
colorstremor-brand-emphasis

Badge Delta

Roundness
borderRadiustremor-full