The Callout component serves to convey highlighted information content of different types.
Default callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { Callout } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 title='Default callout'
5 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
6/>Success callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutSuccess } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 variant="success"
5 title='Success callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Info callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutInfo } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 variant="info"
5 title='Info callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Warning callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutWarning } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 variant="warning"
5 title='Warning callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Danger callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutDanger } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 variant="danger"
5 title='Danger callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Tip callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutTip } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 variant="tip"
5 title='Tip callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Bug callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutBug } from '@tempoplatform/tpds/components/callout'
2
3<CalloutBug
4 variant="bug"
5 title='Bug callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Note callout
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.
1import { CalloutNote } from '@tempoplatform/tpds/components/callout'
2
3<Callout
4 variant="note"
5 title='Note callout'
6 text='Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.'
7/>Prop Name
Type
Default
Required
Description
title
String
' '
required
The title of the callout.
text
String
' '
required
The description of the callout.
omitIcon
Boolean
false
no
Optionally hide the default icon
customIcon
JSX
null
no
Optional custom icon to display. Will not be displayed if omitIcon is false.
children
JSX
null
no
Optional JSX to render inside the callout. Useful if you need to render buttons or links inside the callout.
variant
String
default
optional
The style of the callout. Can be "default", "success", "info", "warning", "danger", "tip", "bug", "note".