Alert | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Alert
Alerts convey a state that can influence a system, feature, or page.
Show Code
Playground
Import
NativeBase exports 2 Alert related components:
Alert: The wrapper for alert components.
Alert.Icon: The visual icon for the alert that changes based on the status prop.
Copy
import { Alert } from "native-base";
Examples
Basic
Playground
Status
Playground
Variant
Playground
Composition
Playground
Action
Playground
Props
Alert
status
The status of the alert
Type: "info" | (string & {}) | "error" | "success" | "warning"
Default: info
variant
The variant of the alert style to use.
Type: ResponsiveValue<"subtle" | "solid" | "outline" | "left-accent" | "top-accent" | "outline-light" | (string & {})>
Default: subtle
colorScheme
The color scheme of the Alert.
Type: ColorSchemeType
Alert.Icon
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the alert.
Info: We can easily extend the alert component theme using extendTheme function as described in the documentation .
Accessibility
Alert has role set to alert.
Nativebase logo
MadeWithNativeBase