Overview
The Alert component displays important messages to users with support for different types, variants, action buttons, and custom icons.
Basic Usage
import { NSAlert } from '@newtonschool/grauity';
import { NSTypography } from '@newtonschool/grauity';
function MyComponent() {
return (
<Alert
variant="primary"
type="filled"
icon="auto"
title={
<NSTypography variant="paragraph-sb-l1" color="inherit">
This is an alert title
</NSTypography>
}
description={
<NSTypography variant="paragraph-md-p3" color="inherit">
This is the alert description with more details.
</NSTypography>
}
showCloseButton={true}
onClose={() => console.log('Alert closed')}
/>
);
}
Type/style of the alert.Available choices:
default - Colorless background, colored icon & textoutlined - Light colored background with outline, colored icon & textfilled - Colored background, white icon & text
Variant/color theme of the alert.Available choices: primary, success, warning, error, default
icon
grauityIconName | 'auto' | null
default:"null"
Alert icon. Use auto to automatically select the icon based on the variant (info, check, warning, or error icon).
title
React.ReactNode
default:""
Alert title content. Can be a string or React element (typically Typography).
description
React.ReactNode
default:""
Alert description content. Can be a string or React element.
Show a close button in the alert.
Callback function when the close button is clicked.
Array of action button configurations to display in the alert.
Display action buttons inline with the content instead of stacked.
CSS position property for the alert.Available choices: static, fixed, absolute, relative
Top position value (useful for fixed positioning).
Bottom position value (useful for fixed positioning).
Left position value (useful for fixed positioning).
Right position value (useful for fixed positioning).
Maximum width of the alert.
Additional CSS class name for styling.
Alert Types
<Alert
type="default"
variant="primary"
icon="auto"
title="Default Alert"
description="Colorless background with colored icon and text."
/>
Alert Variants
<NSAlert variant="primary" type="filled" icon="auto" title="Primary" />
<NSAlert variant="success" type="filled" icon="auto" title="Success" />
<NSAlert variant="warning" type="filled" icon="auto" title="Warning" />
<NSAlert variant="error" type="filled" icon="auto" title="Error" />
<NSAlert variant="default" type="filled" icon="auto" title="Default" />
With Action Buttons
<Alert
variant="primary"
type="filled"
title="Action Required"
description="Please review and take action."
actionButtons={[
{
children: 'Confirm',
variant: 'primary',
color: 'neutral',
size: 'small',
onClick: () => console.log('Confirmed'),
},
{
children: 'Cancel',
variant: 'tertiary',
color: 'neutral',
size: 'small',
onClick: () => console.log('Cancelled'),
},
]}
/>
Inline Buttons
<Alert
variant="success"
title="Success!"
description="Operation completed."
inlineButtons={true}
actionButtons={[
{
children: 'View Details',
variant: 'primary',
size: 'small',
},
]}
/>
With Close Button
<Alert
variant="warning"
icon="auto"
title="Warning"
description="This action cannot be undone."
showCloseButton={true}
onClose={() => console.log('Alert dismissed')}
/>
Custom Icon
<Alert
variant="primary"
icon="sparkle"
title="Custom Icon"
description="Using a custom icon instead of auto."
/>
Fixed Positioning
<Alert
variant="success"
title="Fixed Alert"
position="fixed"
top="20px"
right="20px"
maxWidth="400px"
/>
Constants
import {
ALERT_VARIANTS_ENUM,
ALERT_TYPES_ENUM
} from '@newtonschool/grauity';
// Usage
<NSAlert
variant={ALERT_VARIANTS_ENUM.SUCCESS}
type={ALERT_TYPES_ENUM.FILLED}
/>