The Alert component allows you to display notification or warning messages with different severity levels and customization options.
Import
import { Alert } from '@naturacosmeticos/natds-react'
Basic Usage
<Alert color="info" title="Information">
This is an informational alert message.
</Alert>
Severity Types
The Alert component supports different colors to indicate severity:
// Info alert
<Alert color="info" title="Info">
Information message for the user.
</Alert>
// Success alert
<Alert color="success" title="Success">
Operation completed successfully.
</Alert>
// Warning alert
<Alert color="warning" title="Warning">
Please review this information.
</Alert>
// Error alert
<Alert color="error" title="Error">
An error occurred during the operation.
</Alert>
Variants
Alerts can be displayed with two different border styles:
// Contained (default)
<Alert color="info" type="contained" title="Contained Alert">
This alert has a filled background.
</Alert>
// Outlined
<Alert color="info" type="outlined" title="Outlined Alert">
This alert has only a border.
</Alert>
Without Icon
You can hide the icon by setting showIcon to false:
<Alert color="info" title="No Icon" showIcon={false}>
This alert doesn't display an icon.
</Alert>
Without Title
The title is optional:
<Alert color="info">
This alert has no title, only body content.
</Alert>
Custom Styling
Create custom-styled alerts by using the custom color and providing custom colors:
<Alert
color="custom"
type="outlined"
customIcon="outlined-default-mockup"
customBackgroundColor="#FF00FF"
customBorderColor="#FF00FF"
customIconColor="#FF00FF"
customTextColor="#FF00FF"
>
Custom styled alert with magenta colors.
</Alert>
Props
color
'info' | 'success' | 'error' | 'warning' | 'custom'
default:"info"
The color scheme that defines the alert’s appearance and severity.
type
'contained' | 'outlined'
default:"contained"
The border style of the alert.
The heading text displayed at the top of the alert.
Whether to display the icon.
Custom icon name when using color="custom".
Custom background color (hexadecimal format, e.g., #000000).
Custom text color (hexadecimal format).
Custom icon color (hexadecimal format).
Custom border color (hexadecimal format).
Optional className to be added to the Alert.
The body text content of the alert.
Optional ID for testing purposes.
Accessibility
- The Alert component uses semantic HTML with appropriate ARIA attributes
- Icons provide visual reinforcement of the alert severity
- Color is not the only means of conveying information (icons and text are also used)
Best Practices
Use the appropriate color to match the severity of your message
Include a clear, concise title that summarizes the alert
Keep alert messages brief and actionable
Don’t overuse alerts on a single page — they lose effectiveness
Don’t rely solely on color to convey meaning
