Version: 3.0.7

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.

import { Alert } from 'native-base';

Examples#

Basic#

Status#

Variant#

Composition#

Action#

Props#

Alert#

Name	Type	Description	Default
status	string	The status of the alert	info
variant	"solid" \| "outline" \| "subtle" \| "left-accent" \| "top-accent" \| "outline-light"	The variant of the alert style to use.	subtle
colorScheme	string	The colorScheme of the Alert.	-
action	Element	The action to display. It renders after the message, at the end of the alert.	-
actionProps	IBoxProps	Props to be passed to the action Wrapper Box	-

Alert implements Box

Alert.Icon#

Name	Type	Description	Default
wrapperRef	any	Ref to be passed to Icon's wrapper Box	-

AlertIcon implements Icon

Alert.Title#

AlertTitle implements Box

Alert.Description#

AlertDescription implements Box

Styling#

NativeBase ships with a default theme for each component.

Checkout the default theme of alert

We can easily extend the alert component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
 components: {
 Alert: {
 baseStyle: {},
 defaultProps: {},
 variants: {},
 sizes: {},
 }
 } 
});

function MyApp() {
 return (
 <NativeBaseProvider theme={theme}>
 {/* Rest of the app goes here */}
 </NativeBaseProvider>
 )
}

Accessibility#

Alert has role set to alert.