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

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 className="max-w-md">
      <Text>Current wind speed: Turbine 1</Text>
      <Metric>18.4knts</Metric>
      <Callout
        className="h-12 mt-4"
        title="Critical speed limit reached"
        icon={ExclamationIcon}
        color="rose"
      >
        Turbine reached critical speed. Immediately reduce turbine speed.
      </Callout>
    </Card>

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

API Reference: Callout

title
Description: Sets the title of the callout.
Type: string
Default
Values

coloroptional
Description: Sets the overall style of the callout.
Type: string
Default: blue
Values: See color palette

iconoptional
Description: Set an icon displayed left to the text.
Type: React.ElementType
Default
Values

Button Card