1. Components
  2. Callout

Components

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

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <Callout
    title=""
    text=""
    icon={undefined}
    color="blue"
    height=""
    marginTop="mt-0"
  />
);

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 { Callout, Card, Metric, Text } from "@tremor/react";
import { ExclamationIcon, CheckCircleIcon } from "@heroicons/react/solid";

export default () => (
  <>
    <Card maxWidth="max-w-md">
      <Text>Current wind speed: Turbine 1</Text>
      <Metric>18.4knts</Metric>
      <Callout
        title="Critical speed limit reached"
        text="Turbine reached critical speed. Immediately reduce turbine speed."
        icon={ExclamationIcon}
        height="h-12"
        color="rose"
        marginTop="mt-4"
      />
    </Card>

    <Card maxWidth="max-w-md">
      <Text>Current wind speed: Turbine 2</Text>
      <Metric>7.2knts</Metric>
      <Callout
        title="No critical system data"
        text="All systems are currently within their default operating ranges."
        icon={CheckCircleIcon}
        height="h-12"
        color="teal"
        marginTop="mt-4"
      />
    </Card>
  </>
);

API Reference: Callout

title
Description
Sets the title of the callout.
Type
string
Default
-
Values
text
Description
Sets the text within the callout.
Type
string
Default
Values
coloroptional
Description
Sets the overall style of the callout.
Type
string
Default
blue
Values
See color palette
heightoptional
Description
Set the height of the callout.
Type
string
Default
h-24
iconoptional
Description
Set an icon displayed left to the text.
Type
React.ElementType
Default
-
Values
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0