Components

FeedBackBox
Storybook

The FeedBackBox component is used to display feedback messages to the user. It is a simple and customizable component that can be used to provide feedback to the user in a friendly and intuitive way.

Imports

The first alternative is recommended since they can reduce the application bundle

1import FeedBackBox from 'dd360-ds/FeedBackBox'

1import { FeedBackBox } from 'dd360-ds'

Usage

Use the FeedBackBox component as shown below:

All systems are operationalOperation completed successfully

The code snippet below shows how to use the Callout component:

1import { FeedBackBox } from 'dd360-ds'
2  
3 <FeedBackBox description="Operation completed successfully" title="All systems are operational" txtCloseBtn="close"/>

Type

With the prop type you can customize the icon and color of the of the FeedBackBox

Success!The requested action has been completed successfully.

Error!Information about the system status

1import { Callout, Flex } from 'dd360-ds'
2import {  CheckCircleIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/solid'
3
4export default function App() {
5    return (
6        <Flex className="flex-col" gap="4">
7            <FeedBackBox title="Success!" description="The requested action has been completed successfully." type="success" />
8            <FeedBackBox title="Error!" description="Information about the system status" type="error" />
9        </Flex>
10    )
11}

API Reference

Name	Types	Default
"title"	string	-
"description"	string	-
"type"	error success	success
"defaultIsClose"	boolean	true
"onClose"	() => void	-
"txtCloseBtn"	string	close

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

DropdownFilter Range