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
- iconoptional
- Description
- Set an icon displayed left to the text.
- Type
- React.ElementType
- Default
- -
- Values
- marginTopoptional
ButtonCard