UI

Callout

Used for hints, disclaimers, tips, warnings, or documentation needs.

Sales Performance

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sales Performance

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

Sales Performance

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor. Praesent non lorem sodales, suscipit est sed, hendrerit dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

Import Callout

Tremor exports one callout component.

import { Callout } from '@tremor/react';

Usage example

The example below shows a composition of a Callout with an icon.

Current wind speed: Turbine 1

18.4knts

Critical speed limit reached

Turbine reached critical speed. Immediately reduce turbine speed.

Current wind speed: Turbine 2

7.2knts

No critical system data

All systems are currently within their default operating ranges.

API Reference: Callout

title
Required
string
Sets the title of the callout.
color
Color

Default: blue

Sets the overall style of the callout.
icon
React.ElementType
Set an icon displayed left to the text.

Theming

Callout

Roundness
borderRadiustremor-default
Font size
fontSizetremor-default
Background color
colorstremor-brand-faint
Border color
colorstremor-brand-emphasis
Text color
colorstremor-brand-emphasis