Alerts convey a state that can influence a system, feature, or page.
We are going live in July!
We are happy to announce that we are going live on July 28th. Get ready!
const Example = () => {
return <Alert shadow={2} maxW="400" w="100%" colorScheme="info">
<VStack space={1} flexShrink={1} w="100%">
<HStack flexShrink={1} space={2} alignItems="center" justifyContent="space-between">
<HStack space={2} flexShrink={1} alignItems="center">
<Alert.Icon />
<Heading fontSize="md" fontWeight="medium" color="coolGray.800">
We are going live in July!
</Heading>
</HStack>
<IconButton variant="unstyled" icon={<CloseIcon size="3" color="coolGray.600" />} />
</HStack>
<Box pl="6" _text={{
color: "coolGray.600"
}}>
We are happy to announce that we are going live on July 28th. Get
ready!
</Box>
</VStack>
</Alert>;
};
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.
import { Alert } from "native-base";
We are going live in July!
We are happy to announce that we are going live on July 28th. Get ready!
function Example() {
return <Center>
<Alert maxW="400" status="info" colorScheme="info">
<VStack space={2} flexShrink={1} w="100%">
<HStack flexShrink={1} space={2} alignItems="center" justifyContent="space-between">
<HStack flexShrink={1} space={2} alignItems="center">
<Alert.Icon />
<Text fontSize="md" fontWeight="medium" color="coolGray.800">
We are going live in July!
</Text>
</HStack>
<IconButton variant="unstyled" _focus={{
borderWidth: 0
}} icon={<CloseIcon size="3" />} _icon={{
color: "coolGray.600"
}} />
</HStack>
<Box pl="6" _text={{
color: "coolGray.600"
}}>
We are happy to announce that we are going live on July 28th. Get
ready!
</Box>
</VStack>
</Alert>
</Center>;
}
Selection successfully moved!
We are going live in July!
Poor internet connection.
function Example() {
const statusArray = [{
status: "success",
title: "Selection successfully moved!"
}, {
status: "error",
title: "Please try again later!"
}, {
status: "info",
title: "We are going live in July!"
}, {
status: "warning",
title: "Poor internet connection."
}];
return <Stack space={3} w="100%" maxW="400">
{statusArray.map(status => {
return <Alert w="100%" status={status.status}>
<VStack space={2} flexShrink={1} w="100%">
<HStack flexShrink={1} space={2} justifyContent="space-between">
<HStack space={2} flexShrink={1}>
<Alert.Icon mt="1" />
<Text fontSize="md" color="coolGray.800">
{status.title}
</Text>
</HStack>
<IconButton variant="unstyled" _focus={{
borderWidth: 0
}} icon={<CloseIcon size="3" />} _icon={{
color: "coolGray.600"
}} />
</HStack>
</VStack>
</Alert>;
})}
</Stack>;
}
solid
Selection successfully moved!
left-accent
Selection successfully moved!
top-accent
Selection successfully moved!
outline
Selection successfully moved!
subtle
Selection successfully moved!
outline-light
Selection successfully moved!
function Example() {
const getTextColor = variant => {
switch (variant) {
case "left-accent":
case "top-accent":
case "subtle":
return "coolGray.800";
case "solid":
return "warmGray.50";
}
};
return <ScrollView mt={5}>
<Stack space={3} maxW="400" mr={5} flexDirection="column" justifyContent="center" alignItems="center">
{["solid", "left-accent", "top-accent", "outline", "subtle", "outline-light"].map(key => {
return <>
<Text bold fontSize="xl" mb="4" textAlign="center">
{key}
</Text>
<Alert w="100%" variant={key} colorScheme="success" status="success">
<VStack space={2} flexShrink={1} w="100%">
<HStack flexShrink={1} space={2} alignItems="center" justifyContent="space-between">
<HStack space={2} flexShrink={1} alignItems="center">
<Alert.Icon />
<Text color={getTextColor(key)}>
Selection successfully moved!
</Text>
</HStack>
</HStack>
</VStack>
</Alert>
<Divider mt="5" mb="2.5" />
</>;
})}
</Stack>
</ScrollView>;
}
Your application has been received. We will review your application and respond within the next 48 hours.
Application received!
Your application has been received. We will review your application and respond within the next 48 hours.
function Example() {
return <Center>
<VStack space={5} maxW="400">
<Alert w="100%" status="success">
<VStack space={2} flexShrink={1} w="100%">
<HStack flexShrink={1} space={1} alignItems="center" justifyContent="space-between">
<HStack space={2} flexShrink={1} alignItems="center">
<Alert.Icon />
<Text fontSize="md" fontWeight="medium" _dark={{
color: "coolGray.800"
}}>
Application received!
</Text>
</HStack>
<IconButton variant="unstyled" _focus={{
borderWidth: 0
}} icon={<CloseIcon size="3" />} _icon={{
color: "coolGray.600"
}} />
</HStack>
<Box pl="6" _dark={{
_text: {
color: "coolGray.600"
}
}}>
Your application has been received. We will review your
application and respond within the next 48 hours.
</Box>
</VStack>
</Alert>
<Alert w="100%" status="success">
<VStack space={1} flexShrink={1} w="100%" alignItems="center">
<Alert.Icon size="md" />
<Text fontSize="md" fontWeight="medium" _dark={{
color: "coolGray.800"
}}>
Application received!
</Text>
<Box _text={{
textAlign: "center"
}} _dark={{
_text: {
color: "coolGray.600"
}
}}>
Your application has been received. We will review your
application and respond within the next 48 hours.
</Box>
</VStack>
</Alert>
</VStack>
</Center>;
}
Your coupon could not be processed at this time.
function Example() {
const [show, setShow] = React.useState(true);
return <Box w="100%" alignItems="center">
<Collapse isOpen={show}>
<Alert maxW="400" status="error">
<VStack space={1} flexShrink={1} w="100%">
<HStack flexShrink={1} space={2} alignItems="center" justifyContent="space-between">
<HStack flexShrink={1} space={2} alignItems="center">
<Alert.Icon />
<Text fontSize="md" fontWeight="medium" _dark={{
color: "coolGray.800"
}}>
Please try again later!
</Text>
</HStack>
<IconButton variant="unstyled" _focus={{
borderWidth: 0
}} icon={<CloseIcon size="3" />} _icon={{
color: "coolGray.600"
}} onPress={() => setShow(false)} />
</HStack>
<Box pl="6" _dark={{
_text: {
color: "coolGray.600"
}
}}>
Your coupon could not be processed at this time.
</Box>
</VStack>
</Alert>
</Collapse>
<Button size={"sm"} onPress={() => setShow(true)} mt={8} mx="auto">
Re-Open
</Button>
</Box>;
}
Alert implements
,
,
,
,
,
,
,
,
,
The status of the alert
Type: "info" | (string & {}) | "error" | "success" | "warning"
The variant of the alert style to use.
Type: ResponsiveValue<"subtle" | "solid" | "outline" | "left-accent" | "top-accent" | "outline-light" | (string & {})>
The color scheme of the Alert.
AlertIcon implements
,
,
,
,
,
,
,
,
,
,
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 .Alert has role set to alert.
