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 inputBadgeDelta
: 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
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