Alert | NativeBase | Universal Components for React and React Native

Search
K
Hire us
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 are used to communicate a state that affects a system, feature or page.
Import
NativeBase exports 5 Alert related components:
Alert: The wrapper for alert components.
Alert.Icon: The visual icon for the alert that changes based on the status prop.
Alert.Title: The title of the alert to be announced by screen readers.
Alert.Description: The description of the alert to be announced by screen readers.
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: string
Default: info
variant
The variant of the alert style to use.
Type: "outline" | "subtle" | "solid" | "left-accent" | "top-accent" | "outline-light"
Default: subtle
colorScheme
The colorScheme of the Alert.
Type: string
action
The action to display. It renders after the message, at the end of the alert.
Type: Element
actionProps
Props to be passed to the action Wrapper Box
Type:
Alert.Icon
wrapperRef
Ref to be passed to Icon's wrapper Box
Type: any
Alert.Title
Alert.Description
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