Version: 3.0.0-next.36

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#

Alert implements Box, so all the Box Props can be passed to it.

NameTypeDescriptionDefault
statuserror, info, success, warning or any color from theme.The status of the alert.info
variantleft-accent, solid, subtle, top-accent ,outline,outline-lightThe variant of the alert style to use.subtle
actionJSX.ElementThe action to display. It renders after the message, at the end of the alert.-

Alert.Icon#

Alert.Icon composes Icon and changes the icon based on the status prop.

Alert.Title#

Alert.Title composes the Text component.

Alert.Description#

Alert.Description composes the Text component.