# Alert **Category**: native **URL**: https://www.heroui.com/docs/native/components/alert **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(feedback)/alert.mdx > Displays important messages and notifications to users with status indicators. *** ## Import ```tsx import { Alert } from 'heroui-native'; ``` ## Anatomy ```tsx ... ... ``` - **Alert**: Main container with `role="alert"` and status-based styling. Provides status context to sub-components via a primitive context. - **Alert.Indicator**: Renders a status-appropriate icon by default. Accepts custom children to override the default icon. Supports `iconProps` for customising size and color. - **Alert.Content**: Wrapper for the title and description. Provides layout structure for text content. - **Alert.Title**: Heading text with status-based color. Connected to root via `aria-labelledby`. - **Alert.Description**: Body text rendered with muted color. Connected to root via `aria-describedby`. ## Usage ### Basic Usage The Alert component uses compound parts to display a notification with an icon, title, and description. ```tsx New features available Check out our latest updates including dark mode support and improved accessibility features. ``` ### Status Variants Set the `status` prop to control the icon and title color. Available statuses are `default`, `accent`, `success`, `warning`, and `danger`. ```tsx Success ... Scheduled maintenance ... Unable to connect ... ``` ### Title Only Omit `Alert.Description` for a compact single-line alert. ```tsx Profile updated successfully ``` ### With Action Buttons Place additional elements like buttons alongside the content. ```tsx Update available A new version of the application is available. Refresh ``` ### Custom Indicator Replace the default status icon by passing custom children to `Alert.Indicator`. ```tsx Processing your request Please wait while we sync your data. ``` ### Custom Styling Apply custom styles using the `className` prop on the root and compound parts. ```tsx ... ... ``` ## Example ```tsx import { Alert, Button, CloseButton } from 'heroui-native'; import { View } from 'react-native'; export default function AlertExample() { return ( Update available A new version of the application is available. Please refresh to get the latest features and bug fixes. Refresh Unable to connect to server Unable to connect to the server. Check your internet connection and try again. Retry Profile updated successfully ); } ``` You can find more examples in the [GitHub repository](). ## API Reference ### Alert | prop | type | default | description | | -------------- | ------------------------------------------------------------- | ----------- | ----------------------------------------------------------------- | | `children` | `React.ReactNode` | - | Children elements to render inside the alert | | `status` | `'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | `'default'` | Status controlling the icon and color treatment | | `id` | `string \| number` | - | Unique identifier for the alert. Auto-generated when not provided | | `className` | `string` | - | Additional CSS classes | | `style` | `ViewStyle` | - | Additional styles applied to the root container | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### Alert.Indicator | prop | type | default | description | | -------------- | ----------------- | ------- | ------------------------------------------------------------------ | | `children` | `React.ReactNode` | - | Custom children to render instead of the default status icon | | `className` | `string` | - | Additional CSS classes | | `iconProps` | `AlertIconProps` | - | Props passed to the default status icon (size and color overrides) | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | #### AlertIconProps | prop | type | default | description | | ------- | -------- | ------------ | ---------------------- | | `size` | `number` | `18` | Icon size in pixels | | `color` | `string` | status color | Icon color as a string | ### Alert.Content | prop | type | default | description | | -------------- | ----------------- | ------- | --------------------------------------------------------------- | | `children` | `React.ReactNode` | - | Children elements (typically Alert.Title and Alert.Description) | | `className` | `string` | - | Additional CSS classes | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### Alert.Title | prop | type | default | description | | -------------- | ----------------- | ------- | -------------------------------------------------- | | `children` | `React.ReactNode` | - | Title text content | | `className` | `string` | - | Additional CSS classes | | `...TextProps` | `TextProps` | - | All standard React Native Text props are supported | ### Alert.Description | prop | type | default | description | | -------------- | ----------------- | ------- | -------------------------------------------------- | | `children` | `React.ReactNode` | - | Description text content | | `className` | `string` | - | Additional CSS classes | | `...TextProps` | `TextProps` | - | All standard React Native Text props are supported | ## Hooks ### useAlert Hook to access the alert root context. Must be used within an `Alert` component. ```tsx import { useAlert } from 'heroui-native'; const { status, nativeID } = useAlert(); ``` #### Returns | property | type | description | | ---------- | ------------------------------------------------------------- | ------------------------------------------------------------ | | `status` | `'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | Current alert status for sub-component styling | | `nativeID` | `string` | Unique identifier used for accessibility and ARIA attributes |