UI
Legend
A color-coded legend which goes well with data bar components.
Category 1
Category 2
Category 3
import { Legend } from '@tremor/react';import React from 'react';
export const LegendHero = () => { const [value, setValue] = React.useState(''); return ( <div className="mx-auto max-w-xs"> <Legend className="mt-3" categories={['Category 1', 'Category 2', 'Category 3']} colors={['emerald', 'indigo', 'rose']} onClickLegendItem={(e) => { value === e ? setValue('') : setValue(e); }} activeLegend={value} /> </div> );};Import Legend
Tremor exports one component for Legend.
import { Legend } from '@tremor/react';
Usage example
The example below shows a KPI card in employing Legend to display more information about the data.
Total Users
10,483
6724
10345
0
10345
Active users
Inactive users
import { Card, CategoryBar, Legend } from '@tremor/react';
export function LegendExample() { return ( <Card className="mx-auto max-w-md"> <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Total Users</p> <p className="text-tremor-metric text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">10,483</p> <CategoryBar className="mt-4" values={[6724, 3621]} colors={['emerald', 'red']} /> <Legend className="mt-3" categories={['Active users', 'Inactive users']} colors={['emerald', 'red']} /> </Card> );}API Reference: Legend
client component- categories
- Define the categories in the legend.
Required
string[]
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- onClickLegendItem
- Callback function for when the value of the component changes..
(name: string, color: Color) => void;
- activeLegend
- Set's the active legend item.
string
- enableLegendSlider
- Adds a slider functionality to the legend instead of wrapping the legend items.
boolean
Default: false
Theming
Legend
| Element | Theme Token |
|---|---|
| Text color legend colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Text color legend colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Text color legend (hover) colorstremor-content-emphasis | colorstremor-content-emphasis |
| Font size legend colorstremor-default | colorstremor-default |
| Background color legend (hover) colorstremor-background-subtle | colorstremor-background-subtle |
| Chevron Color Slider colorstext-tremor-content | colorstext-tremor-content |
| Chevron Color Slider (hover) colorstext-tremor-content-emphasis | colorstext-tremor-content-emphasis |
| Chevron Color Slider Background (hover) colorsbg-tremor-background-subtle | colorsbg-tremor-background-subtle |