Alert

Alert

Displays a alert or a component that looks like a alert.

Default

This is an Default message.

Installation

npx react-nex add Alert

Examples

Info


Information

This is an information message.

Success

Success!

Your operation was successful.

Error

Error!

An error occurred while processing your request.

Warning

Warning!

Please proceed with caution.

Props

Type

  • type: Defines the type of alert.
    • Values:
      • "info": Informational message (blue background)
      • "success": Success message (green background)
      • "error": Error message (red background)
      • "warning": Warning message (yellow background)

Title

  • title: The title text for the alert.

Message

  • message: The main content of the alert message.

Position

  • position: Controls where the alert appears on the screen. Defaults to "bottom-right".
    • Options:
      • "top-left": Display the alert at the top-left corner.
      • "top-right": Display the alert at the top-right corner.
      • "bottom-left": Display the alert at the bottom-left corner.
      • "bottom-right": Display the alert at the bottom-right corner.

Additional Props

  • titleStyle: Allows you to apply custom CSS styles to the alert title.

    • Type: string
    • Optional

  • messageStyle: Enables you to define custom CSS styles for the alert message content.

    • Type: string
    • Optional

  • alertContainerStyle: Lets you customize the styles of the entire alert container.

    • Type: string
    • Optional

  • showIcon: Controls whether to display an icon within the alert.

    • Type: boolean
    • Default: true
    • Optional
    • Values: true, false
AccordionAvatar