Feedback – Once UI

Feedback shows a message inside the layout: an error under a form, a warning above a list, a note after a save. It fills the width and takes the color of its variant. Screen readers announce it as an alert when it appears. See the web Feedback page for the web version.

Feedback

import { Feedback } from "@once-ui-system/native";

export function Saved() {
return (
  <Feedback
    variant="success"
    title="Card saved"
    description="Your stamps are synced to this device."
  />
);
}

Icon

icon takes any element and places it before the text. Pass an Icon to match the web.

Icon

import { Feedback, Icon } from "@once-ui-system/native";

export function Offline() {
return (
  <Feedback
    variant="warning"
    icon={<Icon name="warning" onBackground="warning-medium" />}
    title="You are offline"
    description="Changes will sync when you reconnect."
  />
);
}

Close button

showCloseButton adds a "Hide" button next to the title, which calls onClose. It needs a title to show. Remove the feedback from the screen in onClose.

Close button

import { useState } from "react";
import { Feedback } from "@once-ui-system/native";

export function Notice() {
const [open, setOpen] = useState(true);
if (!open) return null;
return (
  <Feedback
    variant="info"
    title="New rewards"
    description="Every tenth coffee is now free."
    showCloseButton
    onClose={() => setOpen(false)}
  />
);
}

Custom content

Children render under the title and description.

Custom content

import { Button, Feedback } from "@once-ui-system/native";

export function PaymentFailed({ onRetry }: { onRetry: () => void }) {
return (
  <Feedback variant="danger" title="Payment failed" description="Your card was declined.">
    <Button variant="secondary" size="s" label="Try again" onPress={onRetry} />
  </Feedback>
);
}

Differences from the web

icon takes an element, not an icon name, and there is no default icon per variant.
Every variant is announced as an assertive alert. On the web, only danger and warning are; info and success are a polite status.
Feedback does not take Flex props. Use style for margins.

API reference

Prop	Type	Default	Description
variant	"info" \| "danger" \| "warning" \| "success"	"info"	The color and meaning.
title	string		A short heading.
description	string		The message under the title.
icon	ReactNode		An element before the text.
showCloseButton	boolean	false	Shows a "Hide" button next to the title.
onClose	() => void		Called when the close button is pressed.
children	ReactNode		Content under the text.
style	ViewStyle		Style for the outer view.