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 } from '@tremor/react';
export const CalloutHero = () => (  <div className="mx-auto max-w-lg space-y-6">    <Callout title="Sales Performance" color="red">      Lorem ipsum dolor sit amet, consectetur adipiscing elit.    </Callout>    <Callout title="Sales Performance" color="teal">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor      lorem non est congue blandit. Praesent non lorem sodales, suscipit est      sed, hendrerit dolor.    </Callout>    <Callout className="h-36" title="Sales Performance" color="indigo">      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.    </Callout>  </div>);

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.

import { RiAlarmWarningLine, RiCheckboxCircleLine } from '@remixicon/react';import { Callout, Card } from '@tremor/react';
export function CalloutUsageExample() {  return (    <div className="space-y-6">      <Card className="mx-auto max-w-md">        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Current wind speed: Turbine 1</p>        <p className="text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">18.4knts</p>        <Callout          className="mt-4"          title="Critical speed limit reached"          icon={RiAlarmWarningLine}          color="rose"        >          Turbine reached critical speed. Immediately reduce turbine speed.        </Callout>      </Card>      <Card className="mx-auto max-w-md">        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Current wind speed: Turbine 2</p>        <p className="text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">7.2knts</p>        <Callout          className="mt-4"          title="No critical system data"          icon={RiCheckboxCircleLine}          color="teal"        >          All systems are currently within their default operating ranges.        </Callout>      </Card>    </div>  );}

API Reference: Callout

title: Sets the title of the callout.

color: Sets the overall style of the callout.

icon: Set an icon displayed left to the text.

Theming

Callout

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