Version: 3.0.0-next.37

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 attached to the Parent Box of the icon -

AlertIcon implements Icon

Alert.Title#

AlertTitle implements Text

Alert.Description#

AlertDescription implements Text

Accessibility#

Alert has role set to alert.