Components

Callout

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

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.

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