Components
Callout
Storybook
Callout
The Callout component is a user interface component that is used to display important information prominently in the user interface. Generally, it is used to draw the user's attention to critical information, such as errors, warnings or important messages.
Imports
The first alternative is recommended since they can reduce the application bundle
1import Callout from 'dd360-ds/Callout'1import { Callout } from 'dd360-ds'Usage
Use the Callout component as shown below:
All systems are operational
All systems are operational
The code snippet below shows how to use the Callout component:
1import { Callout } from 'dd360-ds'
2import { CheckCircleIcon } from '@heroicons/react/solid'
3
4<Callout title="All systems are operational" description="All systems are operational" icon={CheckCircleIcon} />Variant
With the prop variant you can customize the color of the callout
Success!
The requested action has been completed successfully.
System Status
Information about the system status
Attention!
User attention is required in relation to an action or problem.
Error!
An error has occurred in the requested action that needs to be resolved.
1import { Callout, Flex } from 'dd360-ds'
2import { CheckCircleIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/solid'
3
4export default function App() {
5 return (
6 <Flex gap="4">
7 <Callout icon={CheckCircleIcon} title="Success!" description="The requested action has been completed successfully." />
8 <Callout icon={InformationCircleIcon} variant="info" title="System Status" description="Information about the system status" />
9 <Callout icon={InformationCircleIcon} variant="warning" title="Attention!" description="User attention is required" />
10 <Callout icon={XCircleIcon} variant="error" title="Error!" description="An error has occurred" />
11 </Flex>
12 )
13}Icon
With the prop icon you can render a custom icon in the callout before the title, is a optional prop
System Status
Information about the system status
System Status
Information about the system status
1import { Callout, Flex } from 'dd360-ds'
2import { InformationCircleIcon } from '@heroicons/react/solid'
3
4export default function App() {
5 return (
6 <Flex gap="4">
7 <Callout title="System Status" description="Information about the system status" icon={InformationCircleIcon} variant="info" />
8 <Callout title="System Status" description="Information about the system status" variant="info" />
9 </Flex>
10 )
11}Title
With the props title you can provide a title of the callout and this prop is the only required of the component
Oops, Error!
1import { Callout, Flex } from 'dd360-ds'
2import { XCircleIcon } from '@heroicons/react/solid'
3
4export default function App() {
5 return (
6 <Flex gap="4">
7 <Callout title="Oops, Error!" icon={XCircleIcon} variant="error" />
8 </Flex>
9 )
10}CallToAction
With the prop callToAction you can render a custom component in the callout, is a optional prop.
All systems are operational
1import { Callout, Flex } from 'dd360-ds'
2import { XCircleIcon } from '@heroicons/react/solid'
3
4export default function App() {
5 return (
6 <Flex gap="4">
7 <CustomCallout title="All systems are operational" callToAction={<Button variant='secondary'>Click here</Button>} />
8 </Flex>
9 )
10}API Reference
| Name | Types | Default |
|---|---|---|
| "icon" | React.ElementType | - |
| "description" | string | - |
| "variant" | info warning error success | success |
| "title"* | string | - |
| "callToAction" | ReactNode | - |
Note
This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.