Version: 3.2.1

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.
import { Alert } from 'native-base';

Examples#

Basic#

Status#

Variant#

Composition#

Action#

Props#

Alert#

Name Type Description Default
status "info" | "warning" | "success" | "error" | (string & {}) The status of the alert info
variant ResponsiveValue<"outline" | (string & {}) | "subtle" | "solid" | "left-accent" | "top-accent" | "outline-light"> The variant of the alert style to use. subtle
colorScheme string The colorScheme of the Alert. -

Alert implements Box

Alert.Icon#

AlertIcon implements Icon

Alert.Title#

Alert.Description#

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>
)
}
Read more about extending component theme here.

Accessibility#

Alert has role set to alert.