REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Feedback & Overlay
Alert
A compound feedback component for displaying contextual messages with status-based styling, optional icons, and close buttons.
Example
Preview
Code
Props
Alert Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the alert container.
status
'info' | 'success' | 'warning' | 'error'
'info'
The semantic status that determines the alert color scheme.
variant
'solid' | 'subtle' | 'outline'
'subtle'
The visual variant of the alert.
AlertIcon Props
Prop
Type
Default
Description
as
React.ElementType
—
The icon component to render for the alert status.
className
string
—
NativeWind utility classes for the alert icon.
AlertBody Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the alert body container.
AlertText Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the alert text.
AlertCloseButton Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the alert close button.
Usage Guidelines
When to use
Use Alert to display important messages like success confirmations, warnings, or error notices.
Best practices
•
Use the appropriate status (info, success, warning, error) to match the message severity.
•
Include AlertIcon to reinforce the status visually.
•
Keep alert messages concise and actionable.
Accessibility
Alert has an implicit alert role. Screen readers will announce the alert content when it appears.
Related Components
Toast
A compound notification component for displaying brief, auto-dismissing messages via ToastProvider and the useToast hook.
Modal
A compound overlay dialog component with backdrop, content, header, body, footer, and close button sub-components.
Badge
A compound component for displaying short status labels, counts, or tags with semantic color and variant options.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.