Callout Component

The Callout component is a versatile tool for drawing attention to important information within a user interface. It's particularly useful for displaying messages such as warnings, informative notes, success confirmations, or error alerts.

This is an informative message.

This is an success message.

This is an warning message.

This is an error message.

Usage

The following code:

<Callout type="warning">
    Before proceeding, ensure you have completed the previous steps
</Callout>

Gives you:

Before proceeding, ensure you have completed the previous steps

Props

pad: Sets the padding around the content within the callout. It accepts values from 0 to 5, where 0 indicates no padding, and 5 indicates the highest padding level.
type: Defines the type of callout. It can be one of the following:
- warning: Indicates a warning message.
- info: Represents an informative message.
- success: Indicates a successful action or confirmation.
- error: Represents an error or failure.