Feedback – Once UI

A component for providing users with contextual information, alerts, and notifications. The Feedback component helps communicate important messages with appropriate visual styling based on the context.

Feedback

Information

This is an informational message for the user.

Success

Your action has been completed successfully.

Warning

Please be aware of this important notice.

Error

Something went wrong. Please try again.

<Feedback
  title="Information" 
  description="This is an informational message for the user."
/>
<Feedback 
  variant="success" 
  title="Success" 
  description="Your action has been completed successfully."
/>
<Feedback 
  variant="warning" 
  title="Warning" 
  description="Please be aware of this important notice."
/>
<Feedback 
  variant="danger" 
  title="Error" 
  description="Something went wrong. Please try again."
/>

Icon

Feedback components can include an icon to enhance visual communication.

Icon

With Icon

This feedback includes an icon for better visual communication.

Without Icon

This feedback does not include an icon.

<Feedback
  title="With Icon"
  description="This feedback includes an icon for better visual communication."
/>
<Feedback
  showIcon={false}
  variant="warning"
  title="Without Icon"
  description="This feedback does not include an icon."
/>

With close button

Add a close button to allow users to dismiss the feedback.

Dismissible Feedback

This feedback can be dismissed by clicking the close button.

<Feedback
  title="Dismissible Feedback" 
  description="This feedback can be dismissed by clicking the close button."
  showCloseButton={true}
  onClose={() => {
    // Handle close action
    console.log('Feedback closed');
  }}
/>

Custom content

Add custom content to the feedback component.

Custom content

This is custom content inside the Feedback component. You can add any components or elements here.

Action

<Feedback>
  <Text variant="body-default-m" marginTop="4">
    This is custom content inside the Feedback component. You can add any components or elements here.
  </Text>
  <Button size="s">
    Action
  </Button>
</Feedback>

API reference

Prop	Type	Default
variant Severity, which sets the colour and the icon.	infodangerwarningsuccess	info
showIcon Show the icon for the variant.	boolean	true
title Headline of the message.	string	—
description The message itself.	string	—
showCloseButton Let the reader dismiss it.	boolean	false
onClose Called when it is dismissed.	() => void	—
className	string	—
style	React.CSSProperties	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—