Skip to main content

MNAlertText

A simple alert text component that displays a message with different alert types and corresponding background and text colors.

Import​

import MNAlertText from '@/components/MNAlertText';

Props​

PropTypeDefaultDescription
type'primary' | 'secondary' | 'error' | 'warning''primary'Type of alert determining colors
messagestringrequiredThe alert message to display

UI Structure​

  1. Header Toggle Section

    • Tapping the header shows/hides a list of alert types.
    • Uses an icon to indicate expansion state.

  2. Simple Alert Section

    • Tapping "Press me!" triggers MNSimpleAlert.

  3. Alert With Action Buttons

    • Tapping "Press me!" triggers MNAlertWithActions.
    • Includes onConfirm and onCancel callbacks that call MNSimpleAlert.

  4. Static Text Alerts

    • Show different alert types: primary, secondary, error, warning.
    • Non-interactive and styled by alert type.

  5. Dismissable Text Alerts

    • Same types as above but can be closed by user interaction.

Usage​

Basic Primary Alert (default)​

<MNAlertText message="This is a primary alert!"/>

Secondary Alert​

<MNAlertText type="secondary" message="This is a secondary alert!"/>

Error Alert​

<MNAlertText type="error" message="An error occurred."/>

Warning Alert​

<MNAlertText type="warning" message="Please be cautious."/>

MNAlertTextCloseAble​

An alert text component with a close button that allows the alert to be dismissed with animation.

Import​

import MNAlertTextCloseAble from '@/components/MNAlertTextCloseAble';

Props​

PropTypeDefaultDescription
type'primary' | 'secondary' | 'error' | 'warning''primary'Type of alert determining colors
messagestringrequiredThe alert message to display

Usage​

Basic Primary Alert (default)​

<MNAlertTextCloseAble message="This is a closable primary alert!"/>

Secondary Alert​

<MNAlertTextCloseAble type="secondary" message="This is a closable secondary alert!"/>

Error Alert​

<MNAlertTextCloseAble type="error" message="An error occurred."/>

Warning Alert​

<MNAlertTextCloseAble type="warning" message="Please be cautious."/>

Example Usage​

NOTE: All example can be founded in alerts.tsx