Rad UI is under active development and looking for contributors to shape the future of the library. If you'd like to contribute to Rad UI, please check out Getting Started

Callout is a component that can be used to display a message or a notification to the user.

Error

Something went wrong. Please try again later.


import Callout from "@radui/ui/Callout";
import Text from "@radui/ui/Text";

const CalloutExample = () => (
  <Callout color="red">
    <div className="flex items-start">
      <BookmarkIcon />

      <div className="ml-2">
        <Text className="font-bold">Error</Text>
        <Text>Something went wrong. Please try again later.</Text>
      </div>
    </div>
  </Callout>
)